在css转换期间触发事件

Question

我想在css转换期间添加一个类/设置自定义z-index。 在我的研究中，除了webkitTransitionEnd之外我没有找到任何不能完成工作的东西。

我在悬停时有一个动画div但是如果我将鼠标悬停在另一个div之下，那么我就想在转换期间（而不是在悬停期间）设置自定义类。

这是jsfiddle（简化为webkit）

和图像中的问题

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

Answer 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上没有任何改变，未在其他地方进行过测试。）

Answer 2

我会理所当然地认为CSS转换会成功，只需在超时等于转换时间后删除该类：

转换为2s：

.panel {
   transition: opacity 2s;
}

设置此超时以在2000 ms后删除该类：

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");