动画效果
先把样式封装好，然后设置一个动画
不需要vue也能实现的动画的效果，我们只需要判断一下，然后动态的添加和删除类名即可
那能不能不自己写动态，就靠vue
首先我们要靠<transition>标签把需要动画的包裹起来
vue中的有固定的类名表示来和离开
.v-enter-active表示来
.v-leave-active表示走
这里要注意的一点：如果我们给<transition name='hello'>给定了名字,那么我们下面的类名也要跟着改变
还要注意一点：就是我们刚进入页面，它是没有动画的，因此我们要设置动画可以添加一个属性:appear="true"
<transition>在vue解析时用的，因此页面加载的时候是看不到它的
过渡效果
不使用动画，改用过渡实现效果
把进入起点元素的样式写在.hello-enter里面
把终点元素的样式写到enter-to里面
就是这个意思
然后过渡写在一起
优化完毕
多个元素过渡
报错了，因为transition只能使用一个元素，而transition-group可以使用多个元素，但是transition-group里面的元素要标识唯一的key值
实现多个元素之间的过滤
集成第三方动画
集成第三方动画库
先下包npm install animate.js
总结
改一下TODOList代码
* 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。
* 图示：`<img src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105" style="width:60%" />`
* 写法：
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属性：
```vue
<transition name="hello">
<h1 v-show="isShow">你好啊！</h1>
</transition>
```
3. 备注：若有多个元素需要过度，则需要使用：``<transition-group>``，且每个元素都要指定 ``key``值。
实现效果
