在Firefox上没有触发CSS3动画事件

时间:2014-04-01 14:13:36

标签: css3 animation javascript-events

尝试设置一个简单的示例,说明当输入从enable切换到disable状态时我们如何使用CSS3动画捕获,我在Firefox上遇到了问题。

这是复制问题的代码:

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;
    }
}

预期结果:

当输入从启用切换到禁用状态时,应触发事件animationend,反之亦然。

当前行为:

这适用于chrome和IE10 / 11但不幸的是,Firefox在禁用输入时不会触发事件。这可能是预期的结果,但我想知道:

如何让Firefox在禁用的元素上触发animationend事件?

PS :FF上禁用元素的动画有效,这只是未被触发的绑定animationend事件。

1 个答案:

答案 0 :(得分:1)

只需在兄弟元素上设置动画即可修复它。 所以你可以使用例如:

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

使用相关的HTML:

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

See jsFiddle