當元素本身為display：none 時，若此時我們想通過js先將其變為display:block 並且隨后再觸發其他想要的transition過渡效果，需要在 js改變其為display:block 后用setTimeout延遲100ms左右的時間再去設置其他過渡動畫，否則該過渡動畫不會觸發。 另外，如樣式寫在html代碼中，用js設置className 是沒有動畫效果的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#ondiv{
background: #000;
width: 200px;
height: 50px;
}
.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="ondiv">JS transition</div><p></p>
<div id="div" class="test"></div>
<script type="text/javascript">
//onmouseover
document.getElementById("ondiv").onclick=function(){
document.getElementById("div").className = 'test test-hover';
//document.getElementById("div").style.width="200px"
//document.getElementById("div").style.height="200px"
}
document.getElementById("ondiv").onmouseleave=function(){
document.getElementById("div").className = 'test';
//document.getElementById("div").style.width="200px"
//document.getElementById("div").style.height="200px"
}
</script>
</body>
</html>
一個使用transition實現的鼠標懸停淡陰淡出的效果。十分不錯，可以參考參考
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div.demo { float: left; border:1px solid #ccc; } div.demo i { cursor: pointer; height: 50px; transition: opacity 2s; width: 50px; background: #000; float: left; margin: 5px; opacity: 0; } div.demo i:hover { opacity: 1; transition-duration: 0s; } </style> </head> <body> <div class="demo"> <div> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> </body> </html>