Question

将鼠标悬停在某个元素上会翻转它。我想要一个JavaScript函数在用户mouses-off元素完成时转换开始运行。

即。当用户不再悬停在该元素上时，我希望在元素返回其自然状态（在这种情况下为未翻转状态）时运行一些JavaScript。

我尝试绑定到webkitTransitionEnd事件，但是当鼠标悬停的转换完成时以及鼠标关闭的转换完成时会触发此事件。如何区分这两种转变？

我的CSS看起来像这样：

.back {
position: absolute;
z-index: 800;
-webkit-transition: z-index 0s linear .25s, -webkit-transform .5s ease-in-out;
-moz-transition: z-index 0s linear .25s, -moz-transform .5s ease-in-out;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.searchResult:hover .back {
position: absolute;
z-index: 900;
-webkit-transition: z-index 0s linear .25s, -webkit-transform .5s ease-in-out;
-moz-transition: z-index 0s linear .25s, -moz-transform .5s ease-in-out;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}

我的JavaScript看起来像这样（不合适，因为完成鼠标悬停和鼠标关闭过渡（即翻转和取消翻转）时会触发）：

el.find('.back').bind("webkitTransitionEnd", function (e) { /* do stuff */ });

Answer 1

我认为（我还没有进行超过2分钟的测试）我已经解决了这个问题。

解决方案是根据事件target元素的已知CSS属性在javascript中添加条件。在我的情况下，我知道z-index在翻转和非翻转状态下是不同的，并且在我的javascript中使用它似乎可以解决问题。

条件如下：

 if(e.originalEvent.propertyName === '-webkit-transform' && 
    $(e.originalEvent.target).css('z-index') === '800') { 

   /*we know we are at the end of the correct transition*/ 

 }

我的测试浏览器非常现代（在撰写本文时）：Chrome 22.0.1186.0 canary。

Answer 2

事件侦听器实际上会多次触发，每个属性触发一次。您可以使用event.propertyName访问属性名称。把它们放在一起......

element.addEventListener("webkitTransitionEnd", function(e){
    if(e.propertyName == "width") {
        doSomething();
    }
}, false);

或在jQuery中

   $(element).on("webkitTransitionEnd", function(e){
        if(e.originalEvent.propertyName == "width") {
            doSomething();
        }
    });

绑定到特定的CSS转换

2 个答案: