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">
    

    
    
    
    

    
    <transition enter-active-class="bounceIn" leave-active-class="hinge" :duration="{ enter:400, leave:200 }">
        <h3 v-if="flag" class="animated">这是一个H3h3>
    transition>
div>

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