Javascript css转换期间的触发器事件

我想在css转换期间添加一个类/设置一个自定义z索引。 在我的研究中，除了

webkittransationend

之外，我没有发现任何不起作用的东西

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

下面是一个（简化为webkit）

还有图像方面的问题

---

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

我想当然地认为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");

---

问题是，当您“取消悬停”时，切换到原始z索引的操作会立即发生。因此，旋转面板不再在其邻居面前涂漆

解决这个问题的最简单方法是确保z索引值也正在转换。它并没有像您所拥有的那样在您的代码中进行转换，因为z索引是在父

div.panel

上设置的，但是您的转换函数只应用于子

div.front

和

div.back

即使在过渡期间在面板之间切换，这似乎也有效：

---

（请注意，为了简单起见，我已经注释掉了各个面板面上的z索引值；在Chrome上，这两种方法似乎都没有改变任何东西，没有在其他地方进行过测试。）

为什么不使用javascript触发转换，然后您可以轻松添加z索引，设置转换持续时间的超时，并将z索引设置回原位？我的主要问题是，如果悬停：转换开始。如果在转换过程中取消悬停，转换将返回，因此计时器没有任何意义，翻转的持续时间取决于悬停的持续时间。也许您可以使用悬停事件添加类。我将尝试编辑提琴您的JSFIDLE没有显示图片中显示的效果。。。您是否更改了正在使用的效果？它来自同一个小提琴，只需悬停以触发转换并将鼠标向后移动（您有<1秒：）是的，但图片中显示的3d效果不起作用。我在Ubuntu上使用chrome

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