CODEWITHSUNDEEP
javascriptcss
Alexander Solonik
Alexander Solonik

Reputation: 10230

webkitAnimationEnd msAnimationEnd animationend not working

hey guys i am trying to get my webkitAnimationEnd msAnimationEnd animationend to fire in my custom animation but somehow nothing is happening , i am following the examples at MDN , but still without much success , i basically have the following code .

HTML code : 

<div id="tst">

</div>

JS code : 

function showMessage() {
                alert('Transition has finished');
            }

            var element = document.getElementById("tst");
            element.addEventListener("webkitAnimationEnd msAnimationEnd animationend", showMessage, false);

CSS code :

#tst {
                height: 200px;
                width: 200px;
                background: red;
                position: relative;
                -webkit-animation-name: anim;
                -o-animation-name: anim;
                animation-name: anim;
                -webkit-animation-duration: 6s;
                -o-animation-duration: 6s;
                animation-duration: 6s;
            }

            @keyframes anim {
                0% {
                    left: 50%
                }
                100% {
                    left: 0;
                }
            }

on completion of the custom animation the event is not firing. Why ??

I am following the MDN doc's here and running my tests in Mozilla Firefox.

Fiddle can be found here.

Upvotes: 2

Views: 5182

Answers (1)

invernomuto
invernomuto

Reputation: 10211

Your addEventListener call is wrong, the first parameter of addEventListener is:

Quoted from the specs

  • type of type DOMString

The event type for which the user is registering

You cannot specify 3 types of event in vanilla Javascript, it is not a CSS selector (nor a jQuery selector), you need to specify them separately: 

function showMessage() {
    alert('Transition has finished');
}

var element = document.getElementById("tst");
element.addEventListener("webkitAnimationEnd", showMessage, false);
element.addEventListener("oAnimationEnd"     , showMessage, false);
element.addEventListener("msAnimationEnd"    , showMessage, false);
element.addEventListener("animationend"      , showMessage, false);

Running demo

EDIT:

Jquery .on event doesn't do nothing of magic, how can you read from source, it's just a recursive call:

 for ( type in types ) {this.on( type, selector, data, types[ type ], one );}

Upvotes: 4

Related Questions