zoukankan      html  css  js  c++  java
  • 按钮控制div显示和隐藏(动画)

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>按钮控制div显示和隐藏(动画)</title>
        <style>
        .my-transition {
            margin-top: 200px;
             100px;
            height: 100px;
            background: yellow;
            transform: scale(0.5, 0.5);
            opacity: 0;
            /*
                    transition-property: width;
                    transition-duration: 2s;
                    transition-timing-function: linear;
                    transition-delay: 1s;
                    */
            transition: transform 0.5s linear, opacity 0.5s linear;
        }
    
        .my-click-transiton {
            opacity: 1;
            transform: scale(1, 1);
        }
        </style>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    </head>
    
    <body>
        <input type="button" id="mybutton" value="click">
        <div class="my-transition"></div>
        <script>
        //用js触发CSS3-transition过渡动画
        $('#mybutton').click(function() {
            var myTransition = $('.my-transition');
            if (myTransition.hasClass('my-click-transiton')) {
                myTransition.removeClass('my-click-transiton')
            } else {
                $('.my-transition').addClass('my-click-transiton');
            }
        });
        </script>
    </body>
    
    </html>
  • 相关阅读:
    tp5的 LayUI分页样式实现
    BSBuDeJie_05
    WCF 程序入门
    iOS Xcode 调试技巧
    Visual Studio 2015 如何将全英界面转成中文
    BSBuDeJie_04
    BSBuDeJie_03
    BSBuDeJie_02
    BSBuDeJie_01
    iOS 一些琐碎的知识点
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924810.html
Copyright © 2011-2022 走看看