如何使用 jQuery 同步 CSS3 动画事件和事件监听器

Posted 2023-03-06

【中文标题】如何使用 jQuery 同步 CSS3 动画事件和事件监听器

【英文标题】：How to Sync CSS3 Animation Events and Event Listeners with jQuery

【发布时间】：2011-12-21 09:20:31

【问题描述】：

我正在尝试找出一种可靠的跨（现代）浏览器方法来使用 CSS3 动画事件 和事件侦听器来获得对 CSS3 动画的微调控制。我知道这样做是可能的。遗憾的是，尽管我在过去 2-3 周内完成了所有研究，但目前这远远超出了我的能力范围。

到目前为止，这是我的 jsfiddle：http://jsfiddle.net/mvkMH/23/

这是我想要做的： 我有一个<ul>，其ID 为#main，其中包含<li>，其类为.box。当用户点击任何.box 时，它会将.move-y 类添加到($this) - 它还同时将.move-x 类添加到剩余的列表项。当用户单击另一个.box 时，所有现有的.move-y and .move-x 类都将替换为.move-y-rvs and .move-x-rvs 类。一直使用 CSS3 动画事件来保持一切完美同步。

为什么选择 CSS3 动画事件？

ios 上的 CSS3 动画速度很快 通过 jQuery 触发的 CSS3 动画允许您“重新启动”已经播放过的动画 (https://css-tricks.com/restart-css-animation/) 理论上，通过使用 jQuery 跟踪

AnimationStart

、

AnimationIteration

和

AnimationEnd

事件，可以创建非常复杂的交互式 CSS3 动画。

这是脚本在我脑海中的工作方式 - 我只是无法让它在现实生活中工作;-)

单击 .box 元素后，检查 #main 是否有任何 .move-x 和 .move-y 类

如果检测到 .move-x 和 .move-y 类：

将这些类替换为 move-x-rvs 和 .move-y-rvs 使用 .move-x-rvs 和 .move-y-rvs 类将 css 动画事件侦听器附加到元素 在 AnimationEnd 事件 中删除 .move-x-rvs 和 .move-y-rvs 类 将 AnimationName 设置为空字符串（这会重置 css3 动画以在再次单击时再次播放） 现在将 .move-y 类添加到 $(this) 将 .move-x 类添加到所有其他剩余的列表项中

如果未检测到 .move-x 和 .move-y：

将 .move-y 类添加到 $(this) 将 .move-x 类添加到所有其他剩余的列表项中

4 - Animation Event 侦听器功能应为现代浏览器附加前缀（如本例中 - How do I re-trigger a WebKit CSS animation via javascript?）

同样，到目前为止，这是我的 jsfiddle：http://jsfiddle.net/mvkMH/23/

如果您能提供任何帮助，我们将不胜感激！

提前致谢！ Bizarro.Z

【问题讨论】：

$mbox is not defined 错误在你的小提琴？

相当老，但我来到这里....只是修复了你小提琴中的错误jsfiddle.net/mvkMH/82

【参考方案1】：

看看jquery.transit插件

【参考方案2】：

创建一个 jQuery 函数来更改具有特定 ID 的元素的类。 然后你可以通过调用jQuery代码中的函数来同步它们。