Firefox 上未触发 CSS3 动画事件答案

【问题标题】：CSS3 animation event not fired on FirefoxFirefox 上未触发 CSS3 动画事件
【发布时间】：2014-05-12 09:11:30
【问题描述】：

试图设置一个简单的示例，说明我们如何使用 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 上禁用元素的动画有效，这只是未触发的绑定 animationend 事件。

【问题讨论】：

标签： javascript css animation firefox dom-events

【解决方案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

【讨论】：