问题标签 [transitionend]

我已经习惯了使用 jQuery，以至于我似乎无法弄清楚如何用纯 Javascript 来做到这一点。我不想使用 jQuery，因为这是我在网站上使用的唯一片段，而且库太大，仅用于此目的。

这是 jQuery 脚本（工作）：http: //jsfiddle.net/1jt6dhzu/2/

我想把它换成香草JS。大部分循环可以保留，但是必须替换超时和回调。我想因为我不需要 IE9 支持，所以我可以使用 css3 转换和添加类来做到这一点。这是我到目前为止所拥有的：

不幸的是，这不起作用。将timeOuts（最外面的除外）换成transitionend上的事件可能会更好。但我不确定如何实现这个跨浏览器（IE 10 及更高版本，以及其他主要浏览器）。

在Firefox中，它不起作用。但是，使用 addEventListener 而不是 addEvent，它可以工作。mootools 不支持 css 事件吗？

我有一个想法来创建带有动画隐藏和显示方法的模态窗口，我希望它可以与 CSS 过渡一起使用。

我创建了原型https://jsfiddle.net/7bkvcvqq/一切看起来都很好但是当我点击快速按钮时立即触发显示和隐藏时，事件transitionend不会触发并且模式窗口仍在页面上。您可以检查这一点，只需在快速按钮单击后尝试用鼠标选择页面上的一些文本。

例如，在实际代码中，当我将此逻辑用于预加载器时，可能会发生这种情况。我发现的一种解决方案是在隐藏功能中使用 setTimeout，但在不同的计算机中，setTimeout 的延迟不同。也许这取决于CPU，我不知道。

为什么会发生这种情况以及如何防止这种情况发生？

在下面的示例中，我正在background-color使用 CSS 进行转换并尝试处理transitionend两个 div 的事件。

不幸的是，不会因为初始和最终背景颜色相同而transitionend被解雇：div2

transitionend即使在初始状态和最终状态相同的情况下，我如何才能实现处理？

我在我的项目中使用了 knockout.js 和 masonry.js。因此，砌体的文档建议我使用reloaditems 方法将 DOM 的更改应用于砌体。在我为我的项目添加悬停过渡效果之前，它运行良好。这是代码。

正如您在按下“加载更多！”后所看到的那样 按钮砌体似乎重新加载两次！

经过一些调试后，我发现“transitionend”事件使 masonry.js 再次重新加载！

谁能给我一个解决问题的提示？

谢谢你

我正在构建一个手风琴，我在点击时切换每个手风琴折叠。javascript 切换一个类，而 css 负责动画。

当手风琴折叠过渡（扩展或收缩）时，我想将所有手风琴折叠不透明度设置为 1。当 css 过渡完成时，我想将不透明度重置为以前的值，但稍有延迟以避免任何闪烁.

我一直试图弄清楚如何使用transitionend和setTimeout做到这一点，但时间已经完全关闭。任何想法表示赞赏。到目前为止我的代码：

HTML：

CSS：

Javascript：

我有一个棘手的问题。当用户按下 a 时，div我想使用 css 转换添加一个div带有 name的 css 类.active。然后，在短暂的超时后，我想处理transitionend从.active. div问题是，如果用户太快按下按钮，比如每秒 15-20 次，transitionend最终会停止触发。

你可以在这里看到这个效果（可点击的链接），打开 Chrome 浏览器（我无法在 FF 中重现它）并尽可能快地开始点击按钮。15-20 次点击transitionend后将停止触发。

我认为，当transitionend处理程序仍在工作时，用户可以再次按下按钮，div 将获得.active类，但它不会触发transition事件。问题是 - 是否可以编写防弹代码以仅使用事件来清除.active类？transitionend

谢谢你。

*编辑*下面的嵌入片段

我正在尝试通过单击按钮做出简单的转换，其中在 componentWill 更新时 body max-height 变为 0，然后在 componentDidUpdate 上返回 500px 或 100%。我还没有从我看到的其他问题中完全理解它，所以有人可以给我一个例子来解释它是如何工作的吗？

我也不介意使用 reactcsstransitiongroup 的示例/解释。

更多信息

我知道 transitionend 附加了一个事件侦听器，但我感到困惑的是如何使用它来确保组件在转换完成之前不会更新（我已经自学了反应和几乎所有的编码知识，所以我不知道这是否应该很难理解，但目前对我来说很难）。谢谢大家！

寻找为同一按钮单击设置两个事件的最佳方法（请仅使用香草 javascript），第一个应该发生在 touchstart 上，另一个应该发生在 TransitionEnd 上。

这是正确的/最好的方法吗？

我有一个开关，checked我用 jQuery 调用它的状态。每次我单击从未选中到选中的切换时，控制台都会记录"do this!"两次。为什么这个函数会触发两次，让它触发一次的解决方法是什么？

我的最终 HTML 看起来像这样，事件触发了 3 次：