Geek asks and answers

Determine which CSS animation just finished in JavaScript?

How can you tell which CSS animations have just finished in JavaScript?

Ultimately, you need to restart the CSS animation. Due to our HTML hierarchy, we prefer not to check the element class, but instead act only when a specific animation ends. If you have a method that allows you to restart the animation without deleting / adding a class, let us know.

Otherwise ... our code:

    page.find( '.button.letter' ).on( 'webkitAnimationEnd', function() {
        $( this ).removeClass( 'tap_animation' );

        console.log( 'Hi: ' + this.style.webkitAnimationName );

        if ( !write_mode() ) {
            do_write( this );
        }
    });

this.style.webkitAnimationName always returns an empty string.

Are we doing something wrong?

We need code for WebKit browsers, in particular Mobile Safari.

Thank!

+5
source share
2

jQuery originalEvent , , animationName:

$('body').on('webkitAnimationEnd', function(e){
    var animName = e.originalEvent.animationName;
    console.log(animName);
});​

( Webkit) JS Fiddle demo.

if, , / ( , , , ).

, , , :

$('div').on('webkitAnimationEnd', function(e){
    var animName = e.originalEvent.animationName;
    if (animName == 'bgAnim') {
        alert('the ' + animName + ' animation has finished');
    }
});​

( Webkit) JS Fiddle demo.

HTML-:

<div><span>text</span></div>​

CSS:

@-webkit-keyframes bgAnim {
    0%, 100% {
        color: #000;
        background-color: #f00;
    }
    50% {
        color: #fff;
        background-color: #0f0;
    }
}

@-webkit-keyframes fontSize {
    0%, 100% {
        font-size: 100%;
    }
    50% {
        font-size: 300%;
    }
}

div {
    font-weight: bold;
    -webkit-animation: bgAnim;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 2;
}

span {
    font-size: 100%;
    font-weight: bold;
    -webkit-animation: fontSize;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 1;
}
+4

webkitAnimationEnd . - :

    $object.addEventListener('webkitAnimationEnd', function(){
        console.log( 'End Detected' );
    }, false);
0

More articles:


All Articles