javascript - 事件监听器，一个 css 转换结束，另一个开始

Question

我有一个 css 转换，当单击此处显示的按钮时发生 http://jsfiddle.net/xCkX7/5/

我不确定这是否可能，但是，是否可以创建一个事件监听器或者可能有不同的方法，因此当单击该按钮并且转换完成时，另一个类将替换刚刚完成的转换类，并且制作第二个动画。我想避免使用关键帧动画，因为我在使用该特定方法时遇到问题，我想使用动画的最终状态进行变换，但它会重置。您可以在此处查看该问题 http://jsfiddle.net/xCkX7/23/

基本上，我希望动画能够运行它的过程(分两步)，完成，然后能够单击另一个按钮来发生其他转换。喜欢这里http://jsfiddle.net/xCkX7/21/只不过起始变换只是一步。

Answer 1

只要 CSS 转换完成，就会触发 transitionend 事件。您可以从第一个转换中监听该事件，然后在该事件触发时启动第二个转换。

请记住，在某些浏览器中，transitionend 事件名称上有特定于 vendor 的前缀。

在这种情况下，您可以执行以下操作:

1. 按钮被点击
2. 为目标对象上的transitionend事件添加事件监听器
3. 进行更改以启动第一次转换
4. 当transitionend事件触发时，删除事件监听器，这样您就不会与其他结束的转换混淆
5. 进行更改以启动第二次转换

您可以在此处查看多阶段转换的工作版本:http://jsfiddle.net/jfriend00/5FnwY/