vue2 中的过渡效果

最新推荐文章于 2024-04-15 16:31:02 发布

ylhsuper

最新推荐文章于 2024-04-15 16:31:02 发布

阅读量278

点赞数

本文链接：https://blog.csdn.net/ylhsuper/article/details/78492383

版权

可以打开页面看看效果。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script> -->
        <!-- <script src="https://unpkg.com/vue"></script> -->
        <script type="text/javascript" src="js/vue.js"></script>
        <!-- <script type="text/javascript" src="js/vue.min.js"></script> -->
        <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
        <style type="text/css">
            .red{color: #f00;}
            .bounce{}
            .bounce-enter-active{
                animation: bounce-in .3s;
            }
            .bounce-leave-active{animation: bounce-in .3s reverse;}
            @keyframes bounce-in{
                0%{transform: scale(0);}
                50%{transform: scale(2.0);}
                100%{transform: scale(1.0);}
            }

        </style>
    </head>
    <body style="width:500px;margin: 0 auto;">
        <h2>过渡效果测试---引用第三方库</h2>
        <div id="app6">
            <button @click="show=!show">点击</button>
            <transition
                name="custom-classes-transition"
                enter-active-class="animated tada"
                leave-active-class="animated bounceOutRight"
            >
            <!-- duration控制进入和离开的时间 -->
            <!-- <transition
                :duration="{enter:3500,leave:3800}"
                name="custom-classes-transition"
                enter-active-class="animated tada"
                leave-active-class="animated bounceOutRight"
            > -->
                <div v-if="show">transition效果</div>
            </transition>    
        </div>
        <script type="text/javascript">
            var app6 = new Vue({
                el: "#app6",
                data: {
                    show: true
                }
            });
        </script>
        <hr />
        <h2>过渡效果测试---不引用第三方库</h2>
        <div id="app7">
            <button @click="show = !show">点击</button>
            <transition name="bounce">
                <div v-if="show">不引用第三方库transition效果</div>
            </transition>
        </div>
        <script type="text/javascript">
        var app7 = new Vue({
                el: "#app7",
                data: {
                    show: true
                }
            });
        </script>
        <hr />
        
        
    </body>
</html>