检查css3动画是否完成，例如使用jquery转换比例 [英] check if the css3 animation is done for example transform scale using jquery

问题描述

嘿，我正在使用将css3动画应用于图像的滑块. 现在我想检查css动画是否已完成，然后只有我想更改滑块图像. 动画放在名为.animations

Hey i am working on a slider with css3 animations applied to images. Now i wanna check if the css animations have finished then only i wanna change the slider image. the animations are put in a class called .animations

    .animationStuff {
        -moz-transform: scale(1.00);
        -webkit-transform: scale(1.00);
        -o-transform: scale(1.00);
        transform: scale(1.00);
        -ms-transform: scale(1.00);
    }

现在单击按钮，我使用Jquery将animationSuff类添加到图像， 我如何检查图像是否已缩放到正常水平(我是说动画已完成)? 谢谢

Now on button click i add the animationSuff class to image using Jquery, how can i check if the image has scaled to normal ( i mean the animation is finished)? thanks

好吧，我已经进行了更多的研究，找到了这个答案，并且可以正常工作，但是有一个问题， 警报会显示2次，反正这是代码

Ok i've researched some more and found this answer and it works but there is one problem , the alert is displayed 2 times, anyways here is the code

  $(firstBgImage).bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
    alert('hello World');
});

有人可以告诉我为什么动画结束时显示两次吗，谢谢.

Can someone tell me why it's displaying alter 2 times when animation ends, thanks.

推荐答案

您始终可以删除某些支持(例如，过渡等)，并检查问题是否仍然存在. 谢谢.

you can always delete some supports such as transitioned etc and check if problem persists. Thanks.

这篇关于检查css3动画是否完成，例如使用jquery转换比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！