vue过渡动画

vue 过渡动画可以分为两部分

1.vue内置类名：匿名动画，具名动画
内置类名：
​进入

				​进入前 	动画名-enter
				
				进入中	动画名-enter-acitve
			
			​	进入后	动画名-enter-to
			
			离开
			
			​	离开前 	动画名-leave
			
			​	离开中	动画名-leave-active
			
			​	离开后	动画名-leave-to
			
			只要给指定的元素用transition标签包裹起来之后，vue会自动的嗅探元素的状态变化，匹配到不同的类名，从而使用不同类名对应的样式。

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: #f00;
    }
    /* 进入状态 离开状态 */
    .v-enter,.v-leave-to{
    	opacity: 0;
    }
    .v-enter-active,.v-leave-active{
    	transition: all 4s;
    }
    .v-enter-to,.v-leave{
    	opacity: 1;
    }
</style>
<div id="app">
    <transition>
    	<div class="box" v-show="isshow"></div>
    </transition>
    <button @click="isshow=!isshow">切换</button>
</div>

开发中，只会用进入前、离开后，进入中、离开中

具名动画

进入

​ 进入前 name属性值-enter

​ 进入中 name属性值-enter-acitve

​ 进入后 name属性值-enter-to

离开

​ 离开前 name属性值-leave

​ 离开中 name属性值-leave-active

​ 离开后 name属性值-leave-to

2.第三方插件animation.css**
首先需要引入animation.css问价 可以去官网查看

<div id="app">
    <button @click="isshow=!isshow">切换</button>
    <!-- enter-active-class 设置元素进入时的动画 -->
    <!-- leave-active-class 设置元素离开时的动画 -->
    <transition 
        enter-active-class="animate__animated animate__bounceIn"
        leave-active-class="animate__animated animate__bounceOutDown"
    >
    	<div class="box" v-show="isshow"></div>
    </transition>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
        	isshow:true
        }
    })
</script>