【vue】使用animate.css库

通过自己写动画效果实现

以数据的放大和缩小为例
使用 css3中的@keyframes

    <style>
        @keyframes bounce-in{
            0%{
                transform:scale(0);
            }
            50%{
                transform: scale(1.5);
            }
            100%{
                transform: scale(1);
            }
            
        }
        .fade-enter-active{
            /* transition: opacity 3s; */
            transform-origin: left center;
            animation: bounce-in 1s;
        }
        
        .fade-leave-active{
            transform-origin: left center;
            animation: bounce-in 1s reverse;
        }
    </style>
    <div id="root">
        <transition name="fade">
            <div v-if="show">Hello world</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
<script>
    var vm=new Vue({
        el:"#root",
        data:{
            show:true
        },
        methods:{
            handleClick: function(){
                this.show=!this.show
            }
        }
    })
</script>

也可以自己定义名字，这样的话只需要按照如下方式编写transition。（其中active和leave都是自己定义的名字）

        <transition 
        	name="fade"
			enter-active-class="active"
			leave-active-class="leave"
		>
        </transition>

效果：

直接使用效果

到animate.css官方中下载文件（点击这里到官网）
1、将下载的animate.css文档直接引用
2、要包含animated和效果

<transition 
        	name="fade"
			enter-active-class="animated swing"
			leave-active-class="animated jello"
		>
        </transition>