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動畫的時候還需要多多注意動畫帶來的影響。