document.getElementById("mylogo").addEventListener( 'webkitTransitionEnd', function( event )
{
document.getElementById("mylogotext").className = "mylogoText_visible_style";
});
document.getElementById("mylogo").addEventListener( 'transitionend', function( event )
{
document.getElementById("mylogotext").className = "mylogoText_visible_style";
});.mylogoText_style
{
position:absolute;
left:-350px;
top:105px;
opacity:0;
z-index:1;
}
.mylogoText_visible_style{
position:absolute;
left:59px;
top:105px;
opacity:1;
z-index:1;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transition: all 1s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
}这里的问题是，当我试图为Firefox过渡是不发生的。有人能告诉我这里的根本原因或问题是什么吗？
2条答案
按热度按时间h4cxqtbf1#
如果转换被中断，transitionend事件及其前缀变量不会触发。
根据W3C规范：
transitionend事件在转换完成时发生。如果在完成之前移除了转换，例如移除了transition-property，则事件将不会触发。
CSS过渡如何在浏览器级别上工作（请参阅：http://www.w3.org/TR/css3-transitions/#reversing）的另一个缺点是，如果动画被某些属性改变中断，则通过反向执行或在某些情况下完全忽略来“重置”动画。了解这一点可能很有帮助，因为它可以消除在大多数项目中使用transitionend的需要。
ecr0jaav2#
transitioncancel事件已经存在，因此您可以尝试添加以下代码段：在另一个赞成的答复中没有解释这一点的存在。
https://developer.mozilla.org/en-US/docs/Web/API/Element/transitioncancel_event