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>
  • 相关阅读:
    关于接口是值类型还是引用类型的猜测
    絮语工作四年的碎碎念
    烧钱游戏加入创业公司的一些感想
    关于C#调用非托管动态库方式的性能疑问
    couchbase作为分布式session容器时的注意事项
    poj3624
    明天的下载链接
    poj 1502
    poj1459 多源多汇最大流
    poj 3041
  • 原文地址:https://www.cnblogs.com/7qin/p/10632472.html
Copyright © 2011-2022 走看看