绑定到特定的 CSS 过渡
Binding to a specific CSS transition
将鼠标悬停在元素上会翻转它。我希望在用户将鼠标关闭元素时过渡开始时运行一个 JavaScript 函数,完成。
即,当用户不再将鼠标悬停在元素上时,我希望当元素返回到其自然状态(在本例中为未翻转)时运行一些 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 */ });
我认为(我还没有执行超过 2 分钟的测试)我已经解决了这个问题。
解决方案是根据事件target
元素的已知 CSS 属性在 javascript 中添加条件。就我而言,我知道 z 索引在翻转和非翻转状态下是不同的,在我的 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 金丝雀。
事件侦听器实际上触发多次,每个属性触发一次。您可以使用 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();
}
});
相关文章:
- 使用 Modernizr 对 CSS 过渡进行填充
- Javascript获取元素CSS过渡阶段
- CSS 过渡不适用于上、下、左、右
- 淡入,然后使用css过渡淡出一段时间
- CSS 过渡不起作用
- 让 jquery 和 css 过渡效果协同工作
- 绑定到特定的 CSS 过渡
- 暂时禁用CSS过渡效果的最干净方法是什么
- 尝试使用 JavaScript 触发 CSS 过渡
- CSS 过渡背景图像淡入,但不动画大小
- 如何在发生多个过渡时检测“特定”元素上的 CSS 过渡的结束
- 使用 JavaScript 的 CSS 过渡
- 浮点重定位上的 CSS 过渡
- JavaScript 手风琴与 css 过渡
- 在触摸移动时触发时 CSS 过渡不一致
- 点击时的 CSS 过渡
- CSS 过渡:在“高度”样式属性的内联样式之间设置动画
- 如何使我的 CSS 过渡更流畅/在不同的浏览器上工作
- CSS / JavaScript过渡:如果图像快速更改,我的CSS过渡不适用于图库
- 跨浏览器的 CSS 过渡