Vue中的过渡和动画

同一种效果用动画和过渡来写

基本样式

- 元素进入的样式：
        1. v-enter：进入的起点
        2. v-enter-active：进入过程中
        3. v-enter-to：进入的终点
- 元素离开的样式：
        1. v-leave：离开的起点
        2. v-leave-active：离开过程中
        3. v-leave-to：离开的终点

1.动画

<transition name="" appear>
    <h1 v-show='show' >你好啊！！！</h1>
</transition>

<style>
.v-enter-active{
    animation: mm 1s ;
}
.v-leave-active{
    animation: mm 1s reverse;
}

@keyframes mm {
    from{
        transform: translateX(-100%)
    }
    to{
       transform:  translateX(0)
    }
}
</style>

vue中有transition和.v-enter-active（进入时），.v-leave-active（离开时）。transition中的标价会自动将动画加上

2.过渡效果，与动画相比，需要自己设置过渡时间

<transition name="hello" appear>
    <h1 v-show='show' >你好啊！！！</h1>
</transition>

.hello-enter-active,.hello-leave-active{
    transition: 0.5s linear;
}

/* 进入的起点 *//* 离开的终点 */
.hello-enter,.hello-leave-to{
    transform: translateX(-100%);
}
/* 进入的终点 *//* 离开的起点 */
.hello-enter-to,.hello-leave{
    transform: translateX(0);
}

transition的用法

<transition name="hello" appear>
    <h1 v-show='show' >你好啊！！！</h1>
</transition>


//.v-enter-active    name 修改类名 appear使页面加载好之后就呈现进入的效果
.hello-enter-active

当transition中包含多个标签时，改用<transition-grap>包裹并且每个元素都要设置key值，另外可以使用animate.css组件库，

<transition-group 
			appear
			name="animate__animated animate__bounce" 
			enter-active-class="animate__swing"
			leave-active-class="animate__backOutUp"
		>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">尚硅谷！</h1>
</transition-group>