事件监听器，一个css转换结束，另一个启动

Question

我点击按钮时会发生css变换http://jsfiddle.net/xCkX7/5/

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

查看该问题

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

Answer 1

只要CSS转换完成，transitionend事件就会触发。您可以从第一次转换中侦听该事件，然后在该事件触发时开始第二次转换。

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

在这种情况下你可以做的是以下顺序：

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

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