Question

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

首先描述一下我的情况

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

但是，如果我现在尝试改变bgcolor没有任何反应，尽管确实在元素上设置了值，就像开发人员工具报告一样。

此时，如果您在样式和计算样式之间切换（通过浏览器的开发人员工具），则2报表之间存在差异，计算出的样式当然优先。

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

附加一些示例css导致stackoverflow不允许我在没有它的情况下提交帖子

.animate { animation-name：bg_kf; 动画持续时间：5s; 动画定时功能：线性; 动画延迟：0s; animation-iteration-count：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/

Answer 2

您已将动画填充模式设置为“前进”。其效果是将动画CSS属性保持为动画结束时的值（无论其他样式设置如何）。将其设置为“无”将解决您的问题！

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

2 个答案: