我使用 Javascript 在对象上放置了一个过渡:
$(this).css('transition', 'all 1000ms');
我听过渡结束事件:
$(this).on('webkitTransitionEnd', function() { alert('Transition did finish.'); });
事件被触发,一切按预期工作。 但是,当元素以 left:100px
开头,并且您尝试对其进行动画处理以left:100px
永远不会触发事件时,这会导致问题。 我将如何解决这个问题? 我无法真正根据新值检查值,因为
$(this).css('transform', 'scale(0.1)'); //only when object is being displayed will return matrix value
scale(0.5) does not equal matrix(0.5, 0, 0, 0.5, 0, 0 )
如果你的属性相等,webkit转换就不会发生,所以webkitTransitionEnd
不会被触发!
我做了一个帮手在这里解释:http://jsfiddle.net/JtLAX/
因此,您必须在此处为回调函数找到一种不同的方法。
您可能希望在触发转换的事件开始时添加一个 setTimeout(function() {}, 1000)。
或者你可以试试这个库,它对于管理转换和设置回调非常有效:
http://ricostacruz.com/jquery.transit/
有了它,您可以简单地
$(this).transit({ left: '+=200' }, function() { alert('transition ends' } );
关于您的主要问题:
有没有办法检查是否会发生 css 转换?
恕我直言,我认为唯一的解决方案是手动检查样式元素的属性并将它们与过渡进行比较,这非常困难。