zoukankan      html  css  js  c++  java
  • 用js触发CSS3-transition过渡动画

    当元素本身为display:none 时,若此时我们想通过js先将其变为display:block 并且随后再触发其他想要的transition过渡效果,需要在 js改变其为display:block 后用setTimeout延迟100ms左右的时间再去设置其他过渡动画,否则该过渡动画不会触发。 另外,如样式写在html代码中,用js设置className 是没有动画效果的。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <style type="text/css">
            #ondiv{
                background: #000;
                 200px;
                height: 50px;
            }
            .test{
                background: red;
                 100px;
                height: 100px;
                transition: all 1s;
                -moz-transition: all 1s;
                -webkit-transition: all 1s;
                -o-transition:all 1s;
            }
           .test-hover{
                background: red;
                 200px;
                height: 200px;
            }
        </style>
        <body>
            <div id="ondiv">JS transition</div><p></p>
            <div id="div" class="test"></div>
            <script type="text/javascript">
                //onmouseover
                document.getElementById("ondiv").onclick=function(){
                    document.getElementById("div").className = 'test test-hover';
                    //document.getElementById("div").style.width="200px"
                    //document.getElementById("div").style.height="200px"
                }
                document.getElementById("ondiv").onmouseleave=function(){
                    document.getElementById("div").className = 'test';
                    //document.getElementById("div").style.width="200px"
                    //document.getElementById("div").style.height="200px"
                }
            </script>
        </body>
    </html>

    一个使用transition实现的鼠标悬停淡阴淡出的效果。十分不错,可以参考参考

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div.demo {
    float: left;
    border:1px solid #ccc;
    }
    div.demo i {
    cursor: pointer;
    height: 50px;
    transition: opacity 2s;
     50px;
    background: #000;
    float: left;
    margin: 5px;
    opacity: 0;
    }
    div.demo i:hover {
    opacity: 1;
    transition-duration: 0s;
    }
    </style>
    </head>
    <body>
    <div class="demo">
    <div>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    Mac卸载vue-cli2X 时失败: Missing write access to --如侦探小说般的解谜之路
    mac-coursera网站DNS污染的解决方案
    mac摄像头打不开的问题
    node-npm-webpack
    webpack报错 : Can't resolve '.distundle.js'
    npm Error: listen EADDRINUSE 127.0.0.1:8080
    常用mac终端命令
    mac下的环境变量配置- cnpm :command not found
    less安装 出错问题
    vue-devtools vue开发调试神器
  • 原文地址:https://www.cnblogs.com/7qin/p/10632472.html
Copyright © 2011-2022 走看看