尝试设置一个简单示例,说明我们如何使用 CSS3 动画来捕捉输入从 enable
状态切换到 disable
状态时,我在 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:Firefox 上禁用元素的动画有效,这只是未触发的绑定(bind) animationend
事件。
最佳答案
只需在兄弟元素上设置动画即可修复它。 所以你可以使用例如:
.test {position:absolute; left:-9999px;}
input:disabled + .test {
animation: disabled 1ms;
-webkit-animation: disabled 1ms;
}
与相关的 HTML:
<input type="text">
<div class="test"></div>
关于javascript - Firefox 上未触发 CSS3 动画事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22788526/