按钮控制div显示和隐藏（动画）

最新推荐文章于 2024-03-02 11:18:58 发布

徐同保

最新推荐文章于 2024-03-02 11:18:58 发布

阅读量7.6k

点赞数 4

分类专栏： web前端前端技术分享文章标签：动画

本文链接：https://blog.csdn.net/xutongbao/article/details/82384541

版权

web前端同时被 2 个专栏收录

735 篇文章 15 订阅

订阅专栏

前端技术分享

271 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>按钮控制div显示和隐藏（动画）</title>
    <style>
    .my-transition {
        margin-top: 200px;
        width: 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>

徐同保

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
按钮控制div显示和隐藏（动画）

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;按钮控制div显示和隐藏（动画）&lt;/title&gt; &lt;style&gt; .my-transition { margin-top:
复制链接

扫一扫