0

我正在进入css3动画，我偶然发现了animation-fill-mode属性，它基本上可以在动画结束后将动画的值应用于元素。

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

所以例如

 #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}
}

forwards 动画填充模式将使应用了 startAnimation 类的元素宽度为 300 像素，顶部为 300 像素，左侧为 0 像素。

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

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

在大型项目中，上述内容可能会变得很奇怪，其中制作了动画并且存在需要访问宽度、高度、左侧等属性的 javascript 逻辑。

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

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

问候

4

1 回答 1

0

我认为这取决于您要完成的工作。您是否有要解决的问题的更具体用例，然后我可能会得到更具体的答案。

在上述情况下，我不会使用关键帧。在大多数项目中，我发现我不需要关键帧，除非我正在制作某种高级动画，比如一个人走路之类的。对于大多数 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 而不是 left。它有点快）

于 2012-11-22T20:05:19.797 回答