js触发 CSS3-transition过渡动画

作者: xilong | 来源:发表于2017-08-20 23:00 被阅读310次

js触发 CSS3-transition过渡动画
21-动画模块
章节 (21) 动画模块
day21-CSS-动画模块
css animation
有用的Vue第三方库
动画模块
动画模块
元素旋转、变形中心点、背面可见、图片翻面
小程序动画

参考文章 http://blog.csdn.net/pspgbhu/article/details/51448655

如果不用js，我们大多数把 transition 属性用在hover上

平时我们直接使用transition属性过渡效果，一般是这样的。

鼠标移入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. 我们一般把 transition 属性写在选择器上面，如果写在hover上会是一样的吗？

.test:hover{
        background: red;
        width: 200px;
        height: 200px;
        transition: all 1s;   /*写在这里了*/
     }

结果是真的不一样，写在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"
这时就会触发css的过渡动画。

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