CSS3动画和差异风格和计算样式

我进入CSS3动画和我偶然发现了这基本上可以将动画的值的元素，动画结束后动画填充模式属性之间。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类的元件，为300像素宽和300像素定位顶部和0像素左侧。

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

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

以上才可以真正的大项目，其中动画是由和存在需要访问属性，宽度，高度JavaScript逻辑怪异，左等

我的意思是有计算样式之间的这种差异你通过div.style.width（例如）

看了一个我很好奇，听取意见或解决上述问题

问候

来源

2012-11-22 Thomas

我认为这将取决于什么找你试图完成。你是否有更具体的用例来解决你正在尝试解决的问题，然后我可能会对答案进行更具体的描述。

在上面的情况下，我不会使用关键帧。在大多数项目中，我发现我不需要关键帧，除非我正在制作某种高级动画，如走路的人或其他东西。对于大多数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); 
})

（也我会用平移X，而不是离开了。这是一个有点快）

来源

2012-11-22 20:05:19 Jesse

CSS3动画和差异风格和计算样式

回答

相关问题