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

event listener, one css transform ends and another is started

本文关键字：结束 另一个 转换 开始 css 侦听器 一个 事件      更新时间：2023-09-26

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

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

基本上，我希望动画按程序运行（分两步），完成，然后可以单击另一个按钮进行其他变换。就像这里http://jsfiddle.net/xCkX7/21/除了起始变换只是一步。

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

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

在这种情况下，您可以按照以下顺序进行操作：

  1. 单击按钮
  2. 为目标对象上的transitionend事件添加事件listender
  3. 做出改变，开始第一次过渡
  4. 当transitiononed事件触发时，请删除事件侦听器，以免与其他结束的转换混淆
  5. 做出改变，开始第二次过渡

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

相关文章：