用js觸發CSS3-transition過渡動畫
經過這幾天的工作，讓我進一步的了解到CSS3的強大，原本許多需要js才能實現的動畫效果，現在通過CSS3就能輕易實現了，但是CSS3也有自身的不足，例如說在動畫出發觸發上就沒有js靈活，因此我就開始考慮將CSS3與Js結合使用。
不過要注意CSS3屬性兼容性問題
平時我們直接使用transition動畫一般是這樣的
鼠標放置在div方塊上觸發動畫效果（鼠標懸浮div上即可觸發）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css"> .test{ background: red; width: 100px; height: 100px; transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition:all 1s; } .test:hover{ background: red; width: 200px; height: 200px; } </style>
<body>
<div id="div" class="test"></div>
</body>
</html>現在如果想用js控制transition過渡動畫怎么辦呢？
最開始我是想和CSS控制動畫一樣，直接改變其className，但是發現沒有動畫效果。
后來經過了一番探索發現，通過dom操作其css屬性就行了。
例如div 的css設置如下
div{ width:200px; height:200px; transition: all 1s; }然后在js中通過dom操作來改變div的css的具體屬性，如
obj.style.width="400px"
這時就會觸發css的過渡動畫。
下例為成功使用Js出發CSS3動畫（鼠標點擊觸發）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css"> .test{ background: red; width: 100px; height: 100px; transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition:all 1s; } </style>
<body>
<div id="div" class="test"></div>
<script type="text/javascript"> document.getElementById("div").onclick=function(){ document.getElementById("div").style.width="200px" document.getElementById("div").style.height="200px" } </script>
</body>
</html>一個需要注意的地方：
今天在工作中無意發現，當元素本身為display：none 時，若此時我們想通過js先將其變為display:block 並且隨后再觸發其他想要的transition過渡效果，需要在 js改變其為display:block 后用setTimeout延遲100ms左右的時間再去設置其他過渡動畫，否則該過渡動畫不會觸發。
有時間我會將其整理成另外一個博文。