vue——30-动画-使用第三方类( Animate )实现动画

版权声明：未经同意，不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/83050795

引入 animate.css

    <link rel="stylesheet" href="../frame/animate.css">

body

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 入场 bounceIn    离场 bounceOut -->

    <!--<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
        <h3 v-if="flag">这是一个H3</h3>
    </transition>-->
    
    <!-- 使用 :duration="毫秒值" 来统一设置 入场 和 出场 的动画时长-->
    <!--<transition enter-active-class="bounceIn" leave-active-class="hinge" :duration="400">
        <h3 v-if="flag" class="animated">这是一个H3</h3>
    </transition>-->

    <!-- 使用 :duration="{ enter:毫秒值, leave:毫秒值 }" 来分别设置 入场 和 出场 的动画时长-->
    <transition enter-active-class="bounceIn" leave-active-class="hinge" :duration="{ enter:400, leave:200 }">
        <h3 v-if="flag" class="animated">这是一个H3</h3>
    </transition>
</div>

<script>
    window.onload = function () {
        let vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {}
        });
    }
</script>