在vue中使用animate库

<style>
　　@keyframes bounce-in {
　　　　0% {
　　　　　　transform: scale(0);
　　　　}
　　　　50% {
　　　　　　transform: scale(1.5)
　　　　}
　　　　100% {
　　　　　　transform: scale(1);
　　　　}
　　}
　　.fade-enter-active{
　　　　transform-origin: left center;
　　　　animation: bounce-in 1s;
　　}
　　.fade-leave-active{
　　　　transform-origin: left center;
　　　　animation: bounce-in 1s reverse;
　　}
</style>
<div id='app'>
　　<transition name='fade'>
　　　　<div v-if='show'>hello world</div>
　　</transition>
　　<button @click='handleClick'>切换</button>
</div>

<script>
var vm = new Vue({
　　el:'#app',
　　data:{
　　　　show:true
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.show = !this.show;
　　　　}
　　}
})
</script>

这是个放大的动画效果，在vue里面能不能不用fade-leave-active，fade-enter-active这样的规定好的class，我要用自定义的可不可以，可以

<style>
　　.active{
　　　　transform-origin: left center;
　　　　animation: bounce-in 1s;
　　}
　　.leave{
　　　　transform-origin: left center;
　　　　animation: bounce-in 1s reverse;
　　}
</style>

<transition
　　name='fade'
　　enter-active-class='active'
　　leave-active-class='leave'
>
　　<div v-if='show'>hello world</div>
</transition>

在transition里面起自己的别名

既然可以自定义自己的class，就可以使用我们的animate.css库，animate.css库是

https://daneden.github.io/animate.css/

这个库提供了很多动画效果，我们如果要使用这个动画效果，可以下载下来

<script src="../vue.js"></script>
<link rel='stylesheet' type='text/css' href="../animate.css">
<div id='app'>
　　<transition
　　　　name='fade'
　  　　enter-active-class='animated swing'
　　　　leave-active-class='animated shake'
　　>
　　　　<div v-if='show'>hello world</div>
　　</transition>
　　<button @click='handleClick'>切换</button>
</div>

<script>
var vm = new Vue({
　　el:'#app',
　　data:{
　　　　show:true
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.show = !this.show;
　　　　}
　　}
})
</script>

引入animate，出场动画，入场动画就不用自己写了，animated表示引入库里面的动画，后面的swing,shake表示要引入的具体动画名

 

用这个动画库的好处是很多复杂的效果就不用自己写了，直接用库里面的动画效果就可以实现