18.transition-group过度列表

• 单个节点
• 多个节点，每次只渲染一个

那么怎么同时渲染整个列表，比如使用 v-for？在这种场景下，我们会使用 <transition-group> 组件。在我们深入例子之前，先了解关于这个组件的几个特点：

• 默认情况下，它不会渲染一个包裹元素，但是你可以通过 tag attribute 指定渲染一个元素。
• 过渡模式不可用，因为我们不再相互切换特有的元素。
• 内部元素总是需要提供唯一的 key attribute 值。
• CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

     
{{ item }

```

```vue
const list = reactive([1, 2, 4, 5, 6, 7, 8, 9])
const Push = () => {
    list.push(123)
}
const Pop = () => {
    list.pop()
}
```

### 2.列表的移动过渡

``  组件还有一个特殊之处。除了进入和离开，它还可以为定位的改变添加动画。只需了解新增的  `v-move`**  类**就可以使用这个新功能，它会应用在元素改变定位的过程中。像之前的类名一样，它的前缀可以通过  `name` attribute 来自定义，也可以通过  `move-class` attribute 手动设置

下面代码很酷炫

```vue

3.状态过渡

Vue 也同样可以给数字 Svg 背景颜色等添加过度动画 今天演示数字变化