在链接中：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

据说：

注意：如果过渡被中止，则不会触发 transitionend 事件，因为动画属性的值在过渡完成之前已更改。

所以我继续使用 Chrome 和 Firefox 在http://jsfiddle.net/HA8s2/32/和http://jsfiddle.net/HA8s2/33/上进行了尝试。

示例：（单击 jsfiddle 中的左侧或右侧框）

这是 6 秒的 CSS 过渡持续时间：

但两者都保留了动画。左边的盒子实际上是“在原始动画中间动画到一个新的值”，所以左边用了 9 秒完成，而右边的盒子用了 6 秒完成。

此外，Firefox 仅将http://jsfiddle.net/HA8s2/32/中的两个事件间隔 2 秒，而不是 3 秒。

问题是：如何按照 mozilla.org 中的文档中的描述使 transitionend 停止？（而不是通过任何其他蛮力方法）。

（换句话说，我想找出所有transitionend不会触发的情况并进行测试）。

更新：display: none如果我添加到左侧的框中，我能够中止动画，就像在http://jsfiddle.net/HA8s2/34/visibility: hidden上一样，如果它是在http://jsfiddle.net/HA8s2/34/ 上，将无法中止它。 /jsfiddle.net/HA8s2/35/但这些并没有像文档所说的那样真正“改变”属性的值——它是添加或更改另一个属性值。

我在 JavaScript 中有以下竞争条件：

（就是AJAX成功后淡出淡入<h1>some title</h1>，使用CSS3过渡）：

情况是，如果我慢慢点击 UI，那么一切正常，但如果我继续点击 UI 并让新的 AJAX 被触发，那么在大约 20 次点击后，“transitionend”永远不会被触发，有时它会发生，有时不是。

20ms 是由于 Firefox 和 IE 不知道如何在同时删除“不显示”和“淡出”的情况下对其进行动画处理。据说Chrome能够处理它。

任何新用户点击 UI 都会取消原来的 AJAX 并触发一个新的 AJAX。

是.fading-out一个opacity: 0并且not-display是一个display: none。

我怀疑是display: none在“淡出”阶段以某种方式启动，并取消了动画，因此中止了转换，因此该transitionend事件从未被触发，因此该项目从未重新显示，如所述对于JavaScript 或 jQuery，如何使 transitionend 事件不触发？

但我想知道这种情况或任何其他情况是否可能是一个可能的原因，以及什么可以解决。欢迎任何见解。

（我也在想，如果这个逻辑可以有一个标志，表示如果它用于淡出和淡入，那么不要display: none一路设置，这样也不会涉及20ms的延迟）。

更新：想一想，如果在那个 20 毫秒的窗口内，AJAX 成功处理程序添加了fading-out类，然后 20 毫秒的延迟结束并删除了fading-out类，是否足以淡出和淡入来触发transitionend? 或者，如果添加和删除发生在同一个事件周期中怎么办？看起来在 Chrome 中，即使是下一个周期，transitionend也会发生：http: //jsfiddle.net/HA8s2/36/但如果在同一个周期，则transitionend不会发生：http: //jsfiddle.net/ HA8s2/37/

我正在实现一个出色的解决方案（在此处找到）在使用 CSS 转换时使用一个回调函数（如 jQuery ）。

问题是，如果我使用供应商前缀，Chrome 至少会绑定两个事件：一个用于webkitTransitionEnd，第二个用于transitionend，当然，会触发两次回调。这是我的一段代码：

难道我做错了什么？

如何在不支持的浏览器上处理绑定过渡端？

如果我有

我怎样才能让它在ie8中工作？如果浏览器支持，我尝试创建一个包含“transitionend”的字符串，如果不支持，则创建一个包含“change”的字符串，但我认为这不是一个好主意。

有什么建议吗？

有没有人找到一种简单的方法来检测浏览器是否支持 vanillaJs 中的 transitionend 事件，尤其是在所有主要浏览器中都可以使用的方式？:(

我在这里找到了这个未回答的线程：Test for transitionend event support in Firefox，以及很多几乎可以工作的黑客。

现在，我正在向所有供应商前缀批量添加事件侦听器，并且效果不错（尽管我认为这是一种可怕的方法，每次看到它都会伤害我的眼睛）。但是IE8和IE9根本不支持，所以我需要检测这两个，分别对待。

我宁愿在没有浏览器嗅探的情况下执行此操作，并且绝对没有像 jQuery 这样的大型库/框架

我制作了一个 jsfiddler 片段来说明我的问题。有一个生成对话框的按钮。当通过单击关闭删除对话框时，它会以顶部和不透明度进行转换，并且在结束转换后它应该显示=无。但是如果从不触发transitionend（如在IE8和IE9中），则永远不会删除对话框，使其覆盖显示对话框按钮，破坏用户体验。如果我可以检测到 transitionend 何时不工作，我可以在关闭这些浏览器时设置 display=none 。

http://jsfiddle.net/QJwzF/22/

它适用于 Opera、Firefox、Chrome 和 IE10，但不适用于 IE8 和 IE9 (afaik)

如果我在解释我的问题时做得不好，请告诉我，我会努力做得更好！:)

以下代码与 Chrome 和 Firefox（使用“transitionend”）不一致。功能slogan_fade_next只是console.log('end');. 我总是将类名应用到第一个 span 元素，但是当我单击刷新按钮、重新加载或其他任何内容时，之后的任何内容都会发生意外。

slogan-fadein应用到的类slogan[]将元素的不透明度从零更改为一，但回调函数fade_setup不会被一致地调用。

我遇到了一个问题，即我的产品代码将事件绑定transitionend到一个元素。但此事件不会在 Chrome 33、Safari 7.0.2 和 Safari 6.1 上触发。我的代码可以在 Firefox 27.0.1 上正常运行。我的代码曾经在 Chrome 的旧版本（如 25 和 Safari 的 6.0.5）上运行良好。

所以我开始重现这个问题。以下是重现代码：

jsFiddle：http: //jsfiddle.net/PPRJX

复制代码无法在 Safari 7.0.2 上运行。但他们可以在 Chrome 33 上运行。

我想让我的代码在最新的 Chrome 和 Safari 上运行。从我的复制代码中，您可以看到transitionend在 Safari 上不起作用而在 Chrome 上起作用。但在我的产品上，它也不适用于 Chrome。

非常感谢！

在过去使用 JS 转换时，可以通过回调指定转换后发生的某些行为。例如

现在有了 CSS3 过渡，我们可以做这样的事情。

我知道新的 transitionend 事件，所以假设我们可以这样做：

但由于我们现在将 JS 从 UI 中分离出来，因此其他人可能会提供一个即时隐藏内容的新 UI，删除 CSS3 过渡，并无意中中断对强制逻辑后隐藏内容（）的 JS 调用。

另一种情况，假设我有一个盒子，并且有一个重置函数将所述盒子的大小调整为 50x50（带过渡），然后调用强制逻辑后调整（）。如果我两次调用 reset fn ，我认为在这种情况下不能保证触发转换事件 - 但我仍然需要强制LogicAfterResize 两次运行。

在更复杂的代码库中，我还担心在我所针对的特定转换之前调用其他转换。并过早触发强制逻辑（）。我想这里的核心问题是，使用 CSS3 转换，我如何防御性地将mandatoryLogicAfterHidingContent() 事件处理程序与我的并且只有我的调用addClass('hidden')联系起来，就像我可以使用 jQuery 回调一样？

情况

• 为 DIV1 单击 .rightnav.front。
• DIV1 向右移动，不透明度降低
• DIV1 向左移动，完成时不透明度为 0
• DIV1 获取类 .hidden 和 .offset 以隐藏它并将其移出屏幕，因此它不再可点击..
• 下一个 DIV（用于测试目的的 id 为 2 的 DIV）已删除它的隐藏和偏移类，并且是下一个点击事件的目标。

问题

DIV 向右移动，但在隐藏之前不会向左移动（再次返回）。请参阅底部的 Codepen 进行试用。

我只在这里发布 JavaScript 代码。CSS 和 HTML 你会在 codepen 中找到。

这是jQuery代码

代码笔

这是用于实时测试的 CodePen.IO 链接：http: //codepen.io/nygter/pen/QbpegM

我将以下代码与 jquery 一起使用来触发 transitionend 上的事件并避免多个回调/支持多个浏览器：

（在这里找到的代码：http: //davidwalsh.name/css-animation-callback）

但是，无论前缀/语法如何，ie9 似乎都不支持 transitionend。当我在如下场景中使用 ie9 时，如何为 ie9 设置回退（在动画完成后从 DOM 中删除加载屏幕）？

我已经看到了几个关于如何使用与本文顶部类似的函数来防止多个回调的答案，但我只是不了解如何创建回退。谢谢你的帮助！