用js触发CSS3-transition过渡动画

时间 2019-11-24

标签触发 css3 css transition 过渡动画栏目 JavaScript 繁體版

原文原文链接

用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