參考文章 http://blog.csdn.net/pspgbhu/article/details/51448655
如果不用js络拌，我們大多數(shù)把 transition 屬性用在hover上
平時我們直接使用transition屬性過渡效果哈肖，一般是這樣的速警。
鼠標移入div觸發(fā)動畫效果
<!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>
此外失都，我還發(fā)現(xiàn)了一個比較有趣的事情
1. 我們一般把 transition 屬性寫在選擇器上面慈鸠，如果寫在hover上會是一樣的嗎禾锤？
.test:hover{
background: red;
width: 200px;
height: 200px;
transition: all 1s; /*寫在這里了*/
}
結(jié)果是真的不一樣垛玻，寫在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"
這時就會觸發(fā)css的過渡動畫。
一個需要注意的地方
當元素本身為display：none時骨杂，若此時我們想通過js先將其變?yōu)?code>display:block 并且隨后再(請注意此關(guān)鍵詞)觸發(fā)其他想要的transition過渡效果涂身，需要在 js改變其為display:block 后延遲100ms左右的時間再去設置其他過渡動畫，否則該過渡動畫不會觸發(fā)搓蚪。
這個是因為 transition不支持display屬性蛤售。
