CODEWITHSUNDEEP
javascriptjquerycsseventsanimation
Robin_f
Robin_f

Reputation: 212

Animationend event not firing on :after element

I have an animation set on an :after element and a event handler on the animationend event. However, the animationend event never fires in IE10/IE11.

$(document).ready(function(){
    var testdiv = $('#testid');
    testdiv.on('animationend webkitAnimationEnd', function(){
        document.writeln('Animation has ended');
    });
});

JSFiddle: http://jsfiddle.net/Robin_f/R3qEG/

Sincerely hope someone can help me with this.

Upvotes: 3

Views: 1261

Answers (3)

Robin_f
Robin_f

Reputation: 212

After searching the web it has become apparent that IE does not yet support the binding to animation events on a pseudo element. This is made more obvious by the jsFiddle I posted in my original post, which doesn't trigger the event when the animation ends.

Upvotes: 5

A. Wolff
A. Wolff

Reputation: 74420

Looks like a bug in IE or maybe designed like this by DEV team, don't know. A workaround, really hacky, could be to set a fake animation on element to handle IE10/11:

#testid {
    animation: fakeAnim ease-in-out 1s 4 alternate;
}

@keyframes fakeAnim {    
    to {
        opacity: 1;
    }
}

NOTE: firefox will fire event twice, should filter it for Firefox to get logic fired only once.

Could be done using:

var isIE = !! navigator.userAgent.match(/Trident\/7\./);
$(document).ready(function () {
    var testdiv = $('#testid');
    testdiv.on('animationend webkitAnimationEnd', function (e) {
        if (!isIE && e.originalEvent.animationName === "fakeAnim") return;
        alert('Animation has ended');
    });
});

See DEMO jsFiddle

Upvotes: 1

Felix
Felix

Reputation: 38102

It's because:

document.write is disallowed in JSFiddle envioriment and might break your fiddle.

You can use console.log() to debug instead:

$(document).ready(function(){
    var testdiv = $('#testid');
    testdiv.on('animationend webkitAnimationEnd', function(){
        console.log('Animation has ended');
    });
});

Updated Fiddle

or:

$(document).ready(function(){
    var testdiv = $('#testid');
    testdiv.on('animationend webkitAnimationEnd', function(){
        $('#testid').append('Animation has ended');
    });
});

Updated Fiddle

Upvotes: -1

Related Questions