正文
css3动画和jquery动画使用中要注意的问题
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
前一阵子写demo的时候遇到这样一个问题，就是给元素添加css3或者jquery动画时，在动画结束前不能准确取到元素的css属性。
1. css3动画讨论
先看代码：
html:
<div id="hehe"></div>
<button class="change">change</button>
<button class="get">get</button>
css:
#hehe {
width: 100px;
height: 100px;
padding: 10px;
background: red;
-webkit-transition: all 10s ease-out;
-moz-transition: all 10s ease-out;
-o-transition: all 10s ease-out;
transition: all 10s ease-out;
}
js:
$(document).ready(function() {
$('.change').click(function() {
$('#hehe').width(400);
});
$('.get').click(function() {
console.log($('#hehe').width());
});
});
代码很简单。我们给hehe这个div添加了红色的背景色，并且使用了css3里的动画平滑效果css3 trasition（css3 trasition的使用方法可以参考这篇文章：http://www.w3cplus.com/content/css3-transition，写的很详细）。也就是说当hehe发生诸如宽高，背景或者是字体等css属性变化时候，会有ease-out（减速）平滑过渡效果，效果持续10秒。比如说我们点击change按钮，hehe的宽度会消耗10s的时间，慢慢增加到400px，产生动画效果。
问题来了：在动画进行过程中，我单击get按钮，控制台输出的hehe宽度是多少？
一开始我以为是400，因为点击change的时候，审查元素看到"<div id="hehe" style="width: 400px;"></div>"。答案是否定的，我们得到的是动画进行过程中点击时刻hehe的宽度。
我们修改下console的代码:
console.log($('#hehe').css('width');
这下我们看到在整个动画过程中，我们点击get，得到的都是400px。这说明jquery里面的width()是实时获取元素宽度的，而css('width')只是单纯的获取元素的css值，因为也是带单位的。
2.jquery动画讨论
jquery动画就比较好理解了。我们去掉css3 transition的css代码，用jquery的animate来代替。
$(document).ready(function() {
console.log($('#hehe').width());
$('.change').click(function() {
$('#hehe').animate({width: "400px"}, 10000);
});
$('.get').click(function() {
console.log($('#hehe').width());
});
});
由于jquery的动画实际上是动态的给元素添加style样式，所以无论我们是用width()还是css('width')来获取hehe的宽度都是动态变化的。不过也有一点不同，使用width得到的宽度是没有单位px的，而且都是整数；但是使用css('width')获得的宽度是带单位的，并且小数点后面位数很长。
总结：
讨论了这么多，其实关键就是要告诉大家，在使用动画的时候，如果立刻去获取还在变化中的css属性，尤其是宽高，很容易出现问题，必须等到动画结束后在去取这些元素的属性。或者你可以指定需要动画效果的css属性。打个比方，你要获得动画中的宽高，而实际上你想要的动画效果只是背景颜色的变化，那么你在写css3 transition的时候就可以这么写
-webkit-transition: background .7s ease-out;
-moz-transition: background .7s ease-out;
-o-transition: background .7s ease-out;
transition: background .7s ease-out;
这样动画效果只会表现在背景色，而宽高是不会动态变化了。
同样的，对css3动画中的另外两个效果transform（http://www.w3cplus.com/content/css3-transform）和animation（http://www.w3cplus.com/content/css3-animation）也做了测试，发现跟transition是一样的，动画过程中元素属性都是动态变化的，甚至在运用animation的时候，用css('width')这样得到的宽度也是变化的了。感兴趣的同学可以去试试。
因此我们在运用css3动画的时候还需要多多注意动画带来的影响。
