參考文章 http://blog.csdn.net/pspgbhu/article/details/51448655
如果不用js，我們大多數把 transition 屬性用在hover上
平時我們直接使用transition屬性過渡效果，一般是這樣的。
鼠標移入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>
此外，我還發現了一個比較有趣的事情
1. 我們一般把 transition 屬性寫在選擇器上面，如果寫在hover上會是一樣的嗎？
.test:hover{
background: red;
width: 200px;
height: 200px;
transition: all 1s; /*寫在這里了*/
}
結果是真的不一樣，寫在hover上面就只有在移入的時候有動畫效果，移出的時候就沒有動畫效果了
如果想用js控制 transition 怎么辦了？
其實dom 操作其 css就行了。
例如 div 的css設置如下
.test{
background: red;
width: 100px;
height: 100px;
transition: all 1s;
}
然后在js中通過dom操作來改變div的css的具體屬性，如
obj.style.width="400px"
這時就會觸發css的過渡動畫。
一個需要注意的地方
當元素本身為display：none時，若此時我們想通過js先將其變為display:block 并且隨后再(請注意此關鍵詞)觸發其他想要的transition過渡效果，需要在 js改變其為display:block 后延遲100ms左右的時間再去設置其他過渡動畫，否則該過渡動畫不會觸發。
這個是因為 transition不支持display屬性。
