CODEWITHSUNDEEP
javascriptcssanimationfirefoxdom-events
A. Wolff
A. Wolff

Reputation: 74420

CSS3 animation event not fired on Firefox

Trying to set a simple example on how we could use CSS3 animation to catch when an input switch from enable to disable state, I came to an issue on Firefox.

This is code to replicate issue:

Demo jsFiddle

HTML:

<input type="text">
<button>enable/disable INPUT</button>

jQuery:

$(document).on('animationend webkitAnimationEnd', ':input', function (e) {
    if (e.originalEvent.animationName === "disabled") {
        alert('disabled!')
    } 
    else if (e.originalEvent.animationName === "enabled") {
        alert('enabled!')
    } 
})

CSS:

input:disabled {
    -webkit-animation: disabled 1ms;
    animation: disabled 1ms;
}
@-webkit-keyframes disabled {
    to {
        opacity:inherit;
    }
}
@keyframes disabled {
    to {
        opacity:inherit;
    }
}
input:enabled {
    -webkit-animation: enabled 1ms;
    animation: enabled 1ms;
}
@-webkit-keyframes enabled {
    to {
        opacity:inherit;
    }
}
@keyframes enabled {
    to {
        opacity:inherit;
    }
}

Expected Result:

Event animationend should be fired when input switch from enable to disable state and vice versa.

Current behaviour:

This works on chrome and IE10/11 but unfortunately, Firefox doesn't fire event when input is disabled. It could be expected result but I'm wondering:

Any way to make Firefox firing `animationend` event on disabled elements?

PS: Animation on Firefox for disabled elements works, that's just the bound animationend event which is not fired.

Upvotes: 0

Views: 335

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

Simply set animation on a sibling element fix it. So you can use e.g:

.test {position:absolute; left:-9999px;}
input:disabled + .test {    
    animation: disabled 1ms;
    -webkit-animation: disabled 1ms;
}

With relevant HTML:

<input type="text">
<div class="test"></div>

See jsFiddle

Upvotes: 1

Related Questions