美文网首页
js触发 CSS3-transition过渡动画

js触发 CSS3-transition过渡动画

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

参考文章 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左右的时间再去设置其他过渡动画,否则该过渡动画不会触发。

这个是因为 transition不支持display属性。

相关文章

  • js触发 CSS3-transition过渡动画

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

  • 21-动画模块

    过渡和动画之间的异同1.1 不同点 过渡必须人为的触发才会执行动画动画不需要人为的触发就可以执行动画 1.2 ...

  • 章节 (21) 动画模块

    一. 动画模块 1.过渡和动画之间的异同 1.1不同点 过渡必须人为的触发才会执行动画动画不需要人为的触发就可以执...

  • day21-CSS-动画模块

    动画模块 过渡模块和动画模块的异同 不同点 1.过渡模块需要人为触发(例如hover)才会执行动画 --- 过渡三...

  • css animation

    1.过渡和动画之间的异同 1.1不同点 过渡必须人为的触发才会执行动画 动画不需要人为的触发就可以执行动画 1.2...

  • 有用的Vue第三方库

    Animate.css - CSS动画库 Velocity.js - JS动画库 TweenJS - 状态过渡动画...

  • 动画模块

    1.过渡和动画之间的异同 1.1不同点过渡必须人为的触发才会执行动画动画不需要人为的触发就可以执行动画 1.2相同...

  • 动画模块

    1.过渡和动画之间的异同1.1不同点过渡必须人为的触发才会执行动画动画不需要人为的触发就可以执行动画 1.2相同点...

  • 元素旋转、变形中心点、背面可见、图片翻面

    transform:变形 transition:过渡动画——需要触发 animation:一刷新就有动画 3d效果...

  • 小程序 动画

    一、过渡、动画、转换间的总结 对应链接手动触发-->改变属性 + transition属性说明=css过渡cs...

网友评论

      本文标题:js触发 CSS3-transition过渡动画

      本文链接:https://www.haomeiwen.com/subject/fernrxtx.html