• transition完成事件


    当transition事件完成时调用函数(移动端导航的动画消失效果)。

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <style>
            #d1 {
                600px;
                height:600px;
                margin:100px auto;
                border:1px solid;
            }
            #d2 {
                300px;
                height:300px;
                margin:150px;
                border-radius: 150px;
                background: #ccc;
                transition-duration: 2s;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <div id="d2"></div>
        </div>
        <script>
            var d1 = document.getElementById("d1");
            var d2 = document.getElementById("d2");
            d1.onclick = function(){
              d2.style.width = "150px";
              d2.style.height = "150px";
              d2.style.borderRadius = "75px";
              d2.style.background = "green";
            };
            d2.addEventListener("transitionend",function(){
                d2.style.display = "none";
            })
        </script>
    </body>
    </html>
    

      

  • 相关阅读:
    清除cookie
    判断是否为中文
    正则表达式
    smarty基础语法
    smarty模板
    ajax
    php工作笔记1
    PHP中超全局变量$GLOBALS和global的区别
    SQL连表查询
    linux上安装git(客户端)及GitHub的配置
  • 原文地址:https://www.cnblogs.com/dayin1/p/11241637.html
Copyright © 2020-2023  润新知