收听 Javascript 多个 CSS 动画

Question

在第一个动画的结尾我添加了一个新的 class 和一个新的动画，我怎样才能听第二个动画？

    function animate() {
        $ask.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
            $ask.removeClass('bounceIn').wait(2000).addClass('flipOutY');
            //after flipOutY I want to initScene();                
        });
    }

flipOutY 动画完成后我想触发 initScene，我怎样才能在 $ask 上收听每个动画？

Answer 1

你可以这样试试

function animate() {
    var evtAnim = "webkitAnimationEnd oanimationend msAnimationEnd animationend"; 

    /* use on() instead of one() */
    $ask.on(evtAnim, function(e) {

        /* is it the first animation? */
        if ($ask.hasClass('bounceIn')) {
           $ask.removeClass('bounceIn').wait(2000).addClass('flipOutY');
        }
        else {
           /* unbind events and call initScene() */
           $ask.off(evtAnim);
           initScene();
        }
    });
}

Answer 2

如果你想在延迟之后执行一些功能，你可以使用$(el).trigger来模拟一个自定义事件，并为这个事件添加一个处理程序，就像这样：

$ask.one('...', function(){
    $ask.removeClass('bounceIn')
        .wait(2000)
        .addClass('flipOutY')
        .trigger('myCustomEvent');
});

$ask.on('myCustomEvent', initScene);
//                          ^^^
//                  call initScene() when myCustomEvent is triggered

收听 Javascript 多个 CSS 动画

Listen with Javascript multiple CSS animation

javascript

css

jquery

animation