Question

我正在进入css3动画，我偶然发现了动画填充模式属性在动画结束后，基本上可以将动画的值应用于元素。

默认情况下，当动画结束时，元素将恢复到其原始状态。

所以例如

 #box{
     width: 100px;
     position: absolute;
 }

#box.startAnimation{

    animation-name:first, second;
    animation-duration:5s, 5s;
    animation-timing-function:linear;
    animation-delay:0s, 5s;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
}

@-moz-keyframes first
{
    0%   {left:40%; top:0px;background:cyan}
    100% {left:100px; top:0px;}
}

@-moz-keyframes second
{
     0%   {left:100px; top:0px;}
     100% {left:0px; top:300px;width:300px}
}

转发动画填充模式将使应用startAnimation类的元素为300px宽度，并且位于300px顶部和0px左侧。

但是，这些值应用于元素的计算样式而不是css样式。

这可能会导致不一致，因为如果某人现在试图获得元素的宽度，他将返回100px而不是300px。

在大型项目中，上面的内容确实很奇怪，在这些项目中制作了动画，并且有javascript逻辑需要访问属性，如宽度，高度，左边等。

我的意思是计算样式与你通过div.style.width读取的样式之间存在差异（例如）

我很想听听上述问题的意见或解决方案

此致

Answer 1

我认为这取决于你想要完成的事情。您是否有一个更具体的用例来解决您正在尝试解决的问题，那么我可能会对答案有更具体的了解。

如果你有上面我不会使用关键帧。在大多数项目中，我发现我不需要关键帧，除非我正在制作某种高级动画，如人走路或其他东西。对于大多数Web界面，转换和类更改似乎都可以正常工作。

我会有一个基类和一个过渡类，并使用javascript来添加过渡类。然后状态将保持并保持一致，因为它来自您添加的类而不是来自关键帧的末尾。

.base-class { width: 100px; left: 0; top: 0; -webkit-transition: 1s all; }
.transition-class { width: 300px; -webkit-transform: translateX(300px); }

$('.base-class').on('click', function(){ $(this).addClass('transition-class'); });

如果需要，您还可以使用JS查找动画的结尾

$('.base-class').on('-webkit-transition-end', function(){
    var width = $(this).width();
    alert(width);
})

（我也会使用translateX而不是左边。它会快一点）

css3动画和风格与计算风格之间的差异

1 个答案: