事件侦听器，一个 css 转换结束，另一个开始

Question

我有一个 css 转换，当单击按钮时发生，如下所示http://jsfiddle.net/xCkX7/5/

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

基本上我希望动画运行它的过程（它是两个步骤），完成，然后能够单击另一个按钮来发生其他转换。就像这里http://jsfiddle.net/xCkX7/21/一样，除了起始转换只是一步。

Answer 1

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

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

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

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

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