将鼠标悬停在一个元素上会翻转它。我想要一个 JavaScript 函数在用户将鼠标移开元素时开始过渡并完成时运行。
即当用户不再将鼠标悬停在元素上时,我希望当元素返回其自然状态(在本例中为未翻转)时运行一些 JavaScript。
我已尝试绑定(bind)到 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 */ });
最佳答案
我想(我还没有执行超过 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。
关于javascript - 绑定(bind)到特定的 CSS 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11234710/