css - 元素样式与计算样式具有不同的值

Question

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

先简单介绍一下我的情况

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

但是，如果我现在尝试更改 bgcolor，则没有任何反应，尽管该值确实已在元素上设置，正如开发人员工具报告的那样。

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

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

还附加了一些示例 css，因为 stackoverflow 不允许我在没有它的情况下提交帖子

.动画{ 动画名称: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 中定义的动画属性保持背景颜色为红色，而不管实际的内联样式规则指定了什么。这就是为什么切换内联样式似乎没有任何效果。

如果在应用内联样式后立即删除 .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/