vue封装的过度与动画

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

3. 使用步骤：
(1) - 准备好样式

a1： 元素进入的样式：
-------- v-enter: 进入的起点
-------- v-enter-active: 进入过程中
-------- v-enter-to: 进入的终点

a2： 元素离开的样式：
-------- v-leave: 离开的起点
-------- v-leave-active: 离开过程中
-------- v-leave-to: 离开的终点

(2) - 使用<transition>包裹要过度的元素，并配置name属性

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

<style>
.hello-enter-active {
   animation: hello 0.5s linear;
}
.hello-leave-active {
   animation: hello 0.5s linear reverse;
}
@keyframes hello {
   from {
      transition: translateX(-100%);
   }
   to {
      transition: translateX(0px);
   }
}
</style>

(3) - 要让页面一开始就显示动画，需要添加appear

<transition-group name="hello" appear>
    <h1 v-show="!isShow">你好啊！</h1>
    <h1 v-show="isShow">陈慕夏小盆友</h1>
</transition-group>

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

<transition-group name="hello" appear>
    <h1 v-show="!isShow" key="1">你好啊！</h1>
    <h1 v-show="isShow" key="2">陈慕夏小盆友</h1>
</transition-group>

(5) - 第三方动画库：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>

src/App.vue

<template>
   <div>
      <Test/>
      <Test2/>
      <Test3/>
   </div>
</template>

<script>
import Test from './components/Test'
import Test2 from './components/Test2'
import Test3 from './components/Test3'
export default {
   name: 'App',
   components:{Test,Test2,Test3}
}
</script>

src/components/Test.vue

<template>
   <div>
      <button @click="isShow = !isShow">显示/隐藏</button>
	  <transition name="hello" appear>
	      <h1 v-show="isShow">你好啊！</h1>
	  </transition>
   </div>
</template>

<script>
   name: 'Test',
   data() {
      return {
         isShow: true
      }
   }
</script>

<style scoped>
h1 {
   background-color: orange;
}
.hello-enter-active {
   animation: hello 0.5s linear;
}
.hello-leave-active {
   animation: hello 0.5s linear reverse;
}
@keyframes hello {
   from {
      transition: translateX(-100%);
   }
   to {
      transition: translateX(0px);
   }
}
</style>

src/components/Test2.vue

<template>
   <div>
      <button @click="isShow = !isShow">显示/隐藏</button>
	  <transition-group name="hello" appear>
	      <h1 v-show="!isShow" key="1">你好啊！</h1>
	      <h1 v-show="isShow" key="2">陈慕夏小盆友！</h1>
	  </transition-group>
   </div>
</template>

<script>
   name: 'Test2',
   data() {
      return {
         isShow: true
      }
   }
</script>

<style scoped>
h1 {
   background-color: orange;
}
//进入的起点，离开的终点
.hello-enter,hello-leave-to{
   transition: translateX(-100%);
}
.hello-enter-active,.hello-leave-active {
   animation: 0.5s linear;
}
//进入的终点，离开的起点
hello-enter-to,hello-leave {
   transition: translateX(0px);
}
</style>

src/components/Test3.vue

<template>
   <div>
      <button @click="isShow = !isShow">显示/隐藏</button>
	  <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>
   </div>
</template>

<script>
import 'animate.css'
   name: 'Test3',
   data() {
      return {
         isShow: true
      }
   }
</script>

<style scoped>
h1 {
   background-color: orange;
}
</style>

使用动画优化todo-list案例
src/components/MyList.vue

<template>
   <ul class="todo-main">
      <transtion-group>
          <MyItem v-for="todoObj in todoList" :key="todoObj.id" :todoObj="todoObj"/>
      </transtion-group>
   </ul>
</template>

<script>
   import MyItem from './components/MyItem'
   export default {
      name: 'MyList',
      components: {MyItem},
      props: ['todoList']
   }
</script>

<style scoped>
   /*main*/
.todo-main {
   margin-left: 0px;
   border: 1px solid #ddd;
   border-radius: 2px;
   paddding: 0px;
}
.todo-empty {
   height: 40px;
   line-height: 40px;
   border: 1px solid #ddd;
   border-radius: 2px;
   padding-left: 5px;
   margin-top: 10px;
}
.todo-enter-active {
   animation: xxx 0.5s linear;
}
.todo-leave-active {
   animation: xxx 0.5s linear reverse;
}
@keyframes xxx {
   from {
      transform: translateX(100%)
   }
   to {
      transform: translateX(0px)
   }
}
</style>