元素样式与计算样式的值不同

Question

我遇到了一个令人费解的问题，一个属性的计算样式与元素的样式具有不同的值。

先说几句话来描述我的处境

我正在动画元素的背景颜色属性，当动画结束时，我检索计算出的bgcolor值并将其应用于元素的样式。这个很好用

但是，如果我现在尝试更改bgcolor，则什么也不会发生，尽管确实在元素上设置了值，正如开发人员工具所报告的那样。

此时，如果您(通过浏览器的开发人员工具)在样式和计算样式之间切换，则2报告的内容之间会有差异，当然，计算样式优先。

我已经在fiddle上创建了一个测试脚本，它描述了情景http://jsfiddle.net/d2S3d/14/

也附上一些示例css导致堆栈溢出不能让我提交没有它的帖子

.animate{动画名称: bg_kf；动画时长: 5s；动画定时函数:线性；动画延迟: 0s；动画迭代次数: 1；动画填充模式:向前；动画方向:正常；

    -webkit-animation-name: bg_kf;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-direction: normal;

    -moz-animation-name: bg_kf;
    -moz-animation-duration: 5s;
    -moz-animation-timing-function: linear;
    -moz-animation-delay: 0s;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-direction: normal;

    -o-animation-name: bg_kf;
    -o-animation-duration: 5s;
    -o-animation-timing-function: linear;
    -o-animation-delay: 0s;
    -o-animation-iteration-count: 1;
    -o-animation-fill-mode: forwards;
    -o-animation-direction: normal;
}

@keyframes bg_kf {
    from {background-color:#FFFFFF}
    to {background-color:red}
}

@-moz-keyframes bg_kf {
    from {background-color:#FFFFFF}
    to {background-color:red}
}

@-webkit-keyframes bg_kf {
    from {background-color:#FFFFFF}
    to {background-color:rgba(255, 140, 74, 0.16)}
}

@-o-keyframes bg_kf {
    from {background-color:#FFFFFF}
    to {background-color:rgba(255, 140, 74, 0.16)}
}

感谢任何帮助的问候

Answer 1

这就是为什么切换内联样式似乎没有任何效果。

如果您在应用内联样式后立即删除.animate类，则一切将再次恢复正常：

$("#sample").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(){
    var computedBg = $(this).css('background-color');
    $(this).css('background-color', computedBg);
    $(this).removeClass('animate');
});

这是一个演示(尝试在动画完成后单击按钮)：http://jsfiddle.net/vcfDj/

Answer 2

你已经设置了动画填充模式“前进”。这样做的效果是将动画CSS属性保留为动画结束时的值(与其他样式设置无关)。将其设置为"none“将解决您的问题！