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

引入 animate.css

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

// npm 方式
cnpm install animate.css --save
import animated from 'animate.css'
Vue.use(animated)

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>