Vue：（三十一）Vue封装的过度与动画

上一篇订阅与发布不够过瘾，接着再来一篇，come on！！！

1. 作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名

2. 写法：

1. 过度：

1. 元素进入的样式：

1. v-enter：进入的起点

2. v-enter-to：进入的终点

2. 元素离开的样式：

1. v-leave：离开的起点

2. v-leave-to：离开的终点

2. 动画：

1. v-enter-active：进入过程中

2. v-leave-active：离开过程中

3. 使用<transition>包裹要过度的元素，并配置name属性：

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

备注：若有多个元素需要过度，则需要使用<transition-group>，且每个元素都要指定key值

### 动画实现<template><div><button @click="isShow=!isShow">显示/隐藏</button><transition name="hello" appear><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>export default {name: 'TestName',data() {return {isShow: true,}},}
</script><style>h1 {background-color: orange;}.hello-enter-active {animation: konggu 0.5s linear;}.hello-leave-active {animation: konggu 0.5s linear reverse;}@keyframes konggu {from {transform: translateX(-100%);}to {transform: translateX(0px);}}
</style>

### 过度实现<template><div><button @click="isShow=!isShow">显示/隐藏</button><!-- <transition name="hello" appear><h1 v-show="isShow">你好啊</h1></transition> --><transition-group name="hello" appear><h1 v-show="isShow" key="1">你好啊</h1><h1 v-show="isShow" key="2">你好啊</h1></transition-group></div>
</template><script>export default {name: 'TestName',data() {return {isShow: true,}},}
</script><style>h1 {background-color: orange;}/* 进入的起点、离开的终点*/.hello-enter,.hello-leace-to {transform: translateX(-100%);}.hello-enter-active,.hello-leave-active {transform: 0.5s linear;}.hello-enter-to,.hello-leave {transform: translateX(0);}
</style>

### 引用第三方库实现<template><div><button @click="isShow=!isShow">显示/隐藏</button><transition-group name="animate__animated animate__bounce"enter-active-class="animate__backInDown"leave-active-class="animate__backOutDown" appear><h1 v-show="isShow" key="1">你好啊</h1><h1 v-show="isShow" key="2">你好啊</h1></transition-group></div>
</template><script>import 'animate.css'export default {name: 'TestName',data() {return {isShow: true,}},}
</script><style>h1 {background-color: orange;}
</style>

今天就肝到这了，舒服的过个周末。

我是空谷有来人，谢谢大家！