vue动画使用animate.css

这个库可以在animate.css官网下载
也可以到我的资源里下载
示例也在animate.css官网可以看到

使用就像是引入css文件一样

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

transition标签也要更改一点

<div id="root">
    <button @click="handleClick">切换</button>
    <transition name="fade"
    			enter-active-class="animated swing" 
    			leave-active-class="animated bounceOutRight"
 	>
        <div v-show="show">Hello World</div>
    </transition>
</div>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            show: true
        },
        methods: {
            handleClick: function() {
                this.show = !this.show
            }
        },
    })
</script>

enter-active-class和leave-active-class后面的animated必须加，animated后面的是要使用的动画的名字（在animate.css官网看示例的时候显示的名字）