我正在尝试了解 transitionend 如何与我的 CSS3 过渡一起使用,所以我有一组图像,它们的大小调整为网格,并且不透明度从 0 - 1 变化,理想情况下我想做的是等到在继续我的下一个代码之前,所有这些图像都已完成并且最终的 transitionend 事件已触发。目前,我只是想在 transitionend 触发时注销一条消息,但我什么也没得到,这意味着我可能用错了。谁能告诉我该怎么做?
JS fiddle : http://jsfiddle.net/mWE9W/2/
CSS
.image img {
position: absolute;
top: 0;
left: 0;
opacity: 0.01;
-webkit-transition: all 1s ease-in;
-webkit-transform: scale(0);
height: 150px;
width: 150px;
display:block;
}
.inner.active .image img {
-webkit-transform: scale(1);
top: 0;
left: 0;
opacity: 1;
}
JS
$('.image img').on('webkitTransitionEnd', function(e) {
console.log('this ran')
$('h2').fadeIn();
}, false);
最佳答案
1) 您不需要在 .on
方法调用中使用最后一个参数 false
。因此,您的回调从未调用过。
2) 删除不需要的参数后,您会注意到回调实际上被调用了 16 次。发生这种情况是因为您有 4 张图像和 4 个过渡比例。为每个属性设置动画会导致回调被调用。所以你需要做一些检查图像转换是否完成,只有在所有转换完成后调用你的 .fadeIn()
方法。代码如下所示:
var imageCount = $('.image img').length, animatedCount = 0, animCompleteImages = $();
$('img').imagesLoaded(function() {
$('.inner').addClass('active').on('webkitTransitionEnd', 'img', function(e) {
if(!animCompleteImages.filter(this).length) {
animCompleteImages = animCompleteImages.add(this);
animatedCount++;
if(animatedCount === imageCount) {
$('h2').fadeIn();
}
}
});
});
可用的 JS fiddle here .
关于javascript - 正确使用 transitionend 以便在最终 CSS3 过渡完成后运行脚本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13499993/