在 CSS 转换期间触发事件答案

【问题标题】：Trigger event during a css transition在 CSS 转换期间触发事件
【发布时间】：2014-02-01 16:18:45
【问题描述】：

我想在 css 过渡期间添加一个类/设置一个自定义 z-index。在我的研究中，除了 webkitTransitionEnd 之外，我没有找到任何东西。

我在悬停时有一个动画 div，但如果我悬停多个 div，他会低于另一个，这就是为什么我想在过渡期间（而不是在悬停期间）设置自定义类。

这是jsfiddle（为 webkit 简化）

以及图片中的问题

编辑：真正的问题是当我悬停一个 div，取消悬停，重新悬停，悬停另一个，所以很难做一个简单的超时......

【问题讨论】：

为什么不使用javascript触发过渡，然后您可以轻松添加z-index，使用过渡持续时间设置超时并将z-index设置回来？

标签： javascript jquery html css events

【解决方案1】：

问题在于，当您“取消悬停”时，会立即切换到原始 z-index。因此，旋转面板不再在其邻居面前绘制。

解决这个问题的最简单方法是确保 z-index 值也正在转换。它没有像您拥有的那样在您的代码中进行转换，因为 z-index 是在父级 div.panel 上设置的，但您的转换函数仅应用于子级 div.front 和 div.back。

即使您在转换中间的面板之间切换，这似乎也有效：

http://jsfiddle.net/8Fvdb/1/

.panel{
  transition: z-index 1s;
}

（请注意，为简单起见，我已将各个面板面上的 z-index 值注释掉；它似乎在 Chrome 上没有任何改变，尚未在其他地方进行测试。）

【讨论】：

【解决方案2】：

我会理所当然地认为 CSS 转换会成功，并且在与转换时间相等的超时后删除类：

有 2s 的过渡：

.panel {
   transition: opacity 2s;
}

设置此超时以在 2000 毫秒后删除类：

setTimeout(function(){
    //you remove the class after the transition time
    $('.panel').removeClass("transition-running");
},2000)

$('.panel')
     //you add the class before changing the style
    .addClass("transition-running")    
    .css("opacity","0.1");

【讨论】：

我的主要问题是如果你悬停：过渡开始。如果您在该过渡期间取消悬停，则过渡会返回，因此计时器毫无意义，翻转的持续时间取决于悬停的持续时间
也许你可以使用悬停事件来添加类。我会尝试编辑小提琴
你的jsfiddle没有显示你在图片中显示的效果...你改变你使用的效果了吗？
它来自同一个小提琴，只需悬停即可触发过渡并将鼠标移回（您有
是的，但是图片中显示的 3d 效果不起作用。我在 Ubuntu 上使用 chrome