这里我就直接上最易懂的代码 给大家看一下
a. 首先在demo 文件夹下面创建了一个 transition 的文件夹 里面有创建了一个index.vue 文件
a. 然后倒入 main.js 里面
a. 给目标元素外面套一个transition 的标签 并且赋予 类名
b. 给类名后面加上 过度的类名
c. 在进入/离开的过渡中，会有 6 个 class 切换。
以上是控制单个元素 那么如果我们如果要 同时控制多个元素 以上方法是不可行的
那么接下来我们看下如何操作多个元素
此时操作到这里面我们的代码是会报错的
这个意思是 transition 标签只能用于一个元素 让我们使用 transition-group 这个标签 那么我们按照提示给内容
**此时这里还会有一个错误 提示我们：transition-group 的子元素 必须有key 值 **
a. 此时的话我们的动画就可以正常显示和隐藏了
b. 另一种方法就是 给他们俩找一个共有的父元素包裹起来也是可以的
总结：
过度使用 在某一个元素或者多个元素进入或者离开页面 添加动画
1.在该元素的外部添加 transition 标签
2.多个元素添加 transition-group 每一个子元素需要key
3.通过name属性添加名字
4.在样式里添加过度样式
5. 进入 name-enter name-enter-to name-enter-active
6. 进入 name-leave name-leave-to name-leave-active