1

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

先用几句话描述一下我的情况

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

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

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

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

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

.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)}
}

任何帮助表示感谢

4

2 回答 2

2

这里的问题是您定义的动画属性.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/

于 2012-12-18T11:11:36.950 回答
0

您已将动画填充模式设置为“转发”。其效果是将动画 CSS 属性保持在动画结束时的值（不管其他样式设置）。将其设置为“无”将解决您的问题！

于 2013-06-02T09:40:46.690 回答