vue中使用＜transition-group＞＜transitionGroup＞

原文链接：

TransitionGroup | Vue.js (vuejs.org)

<transitionGroup>是一个内置组件，用于对V-for列表中得元素或者组件得插入 ，移出和顺序改变动画效果

和<transition>的区别

<transitionGroup>支持和<transition>基本相同的props,css过滤class 和 js钩子函数监听器

但是有以下几点区别

1. 默认情况下，它不会渲染一个容器元素，但是你可以通过传入tag prop来指定一个元素作为容器元素来渲染

2. 过度模式在这里不可以用 因为我们不再是在互斥元素之间进行切换

3. 列表中每个元素都必须有一个独一无二的attribute

4. css过渡class会被应用在列表内的元素上，而不是容器元素上

5. 提示： 在DOM模板中使用时，组件名需要写为<transition-group>

demo <transitionGroup>对一个v-for列表添加进入-离开动画实例

<transitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
     {{ item }}
  </li>
</transitionGroup>

css样式

.list-enter-active,.list-leave-active {
    transition: all 0.5s ease;
}
.list-enter-form,.list-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}

后续再更新吧，后面没有看了