集成第三方动画

安装第三方库
```
npm install animate.css --save
```
引入
```
  import 'animate.css'
```
配置

使用

<transition-group
     name="animate__animated animate__bounce"
     enter-active-class="animate__lightSpeedInLeft"
     leave-active-class="animate__zoomOutLeft"
     appear>
 <h1 v-show="isShow" key="1">你好啊</h1>
 <h1 v-show="isShow" key="2">测试一下</h1>
</transition-group>

总结

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

写法：
1. 准备好样式
  - 元素进入样式
    1. v-enter：进入的起点
    2. v-enter-active：进入的过程（使用动画时使用）
    3. v-enter-to：进入的终点
  - 元素离开的样式
    1. v-leave：离开的起点
    2. v-leave-active：离开的过程（使用动画时使用）
    3. v-leave-to：离开的终点
2. 使用transition 包裹需要过渡的元素并配置name属性
3. 备注： 若存在多个元素需要过渡，则使用transition-group 进行包裹，并为每个元素指定key 值

Todo-list动画

方案1

在Item组件的template组件中的li组件外侧使用 transition包裹，并配置name值为todo
将样式添加到该组件的css样式中

Item组件

<template>
   <transition name="todo" appear>
       <li>
           <label>
               <input type="checkbox" :checked="todo.done"               
                     @change="handleCheck(todo.id)">
               <span v-show="!todo.isEdit">{{ todo.tittle }}</span>
               <input type="text"
                         :value="todo.tittle"
                         v-show="todo.isEdit"
                         ref="inputTitle"
                         @blur="handleBlur(todo,$event)">
           </label>
           <button class="btn btn-danger" @click="deleteItem(todo.id)">删除</button>
           <button class="btn  btn-edit" @click="editTodoItem(todo)" v-show="!todo.isEdit">编辑</button>
       </li>
    </transition>
</template>
<style>
@keyframes tittle {
 from{
 transform: translateX(-100%);
 }
 to{
 transform: translateX(0px);
 }
}
</style>

方案2

在List组件的template组件中的Item组件外侧使用 transition-group包裹，并配置name值为todo
将样式添加到该组件的css样式中

List组件

<template>
    <div class="list">
      <ul class="main">
         <transition-group name="todo" appear>
             <Item v-for="item in todoArr"
                    :key="item.id"
                   :todo="item">
             </Item>
         </transition-group>
     </ul>
   </div>
</template>
<style>
@keyframes tittle {
 from{
 transform: translateX(-100%);
 }
 to{
 transform: translateX(0px);
 }
}
</style>

Vue 第三方动画（Day36）

集成第三方动画

总结

Todo-list动画

方案1

方案2