用js触发CSS3-transition过渡动画

来源：互联网发布：加工中心编程学徒招聘编辑：程序博客网时间：2024/06/05 03:16

经过这几天的工作，让我进一步的了解到CSS3的强大，原本许多需要js才能实现的动画效果，现在通过CSS3就能轻易实现了，但是CSS3也有自身的不足，例如说在动画出发触发上就没有js灵活，因此我就开始考虑将CSS3与Js结合使用。

不过要注意CSS3属性兼容性问题

平时我们直接使用transition动画一般是这样的

鼠标放置在div方块上触发动画效果（鼠标悬浮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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

现在如果想用js控制transition过渡动画怎么办呢？
最开始我是想和CSS控制动画一样，直接改变其className，但是发现没有动画效果。
后来经过了一番探索发现，通过dom操作其css属性就行了。

例如div 的css设置如下

div{    width:200px;    height:200px;    transition: all 1s;}1
2
3
4
5

然后在js中通过dom操作来改变div的css的具体属性，如
obj.style.width="400px"
这时就会触发css的过渡动画。

下例为成功使用Js出发CSS3动画（鼠标点击触发）

<!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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

一个需要注意的地方：
今天在工作中无意发现，当元素本身为display：none 时，若此时我们想通过js先将其变为display:block 并且随后再触发其他想要的transition过渡效果，需要在 js改变其为display:block 后延迟100ms左右的时间再去设置其他过渡动画，否则该过渡动画不会触发。

阅读全文

1 0