用js觸發CSS3-transition過渡動畫

用js觸發CSS3-transition過渡動畫

通過這幾天的工做,讓我進一步的瞭解到CSS3的強大,本來許多須要js才能實現的動畫效果,如今經過CSS3就能輕易實現了,可是CSS3也有自身的不足,例如說在動畫出發觸發上就沒有js靈活,所以我就開始考慮將CSS3與Js結合使用。javascript

不過要注意CSS3屬性兼容性問題css


平時咱們直接使用transition動畫通常是這樣的html

鼠標放置在div方塊上觸發動畫效果(鼠標懸浮div上便可觸發)java

<!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設置以下css3

div{ width:200px; height:200px; transition: all 1s; }

而後在js中經過dom操做來改變div的css的具體屬性,如
obj.style.width="400px"
這時就會觸發css的過渡動畫。web


下例爲成功使用Js出發CSS3動畫(鼠標點擊觸發)markdown

<!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左右的時間再去設置其餘過渡動畫,不然該過渡動畫不會觸發。


有時間我會將其整理成另一個博文。dom

相關文章
相關標籤/搜索