0-12 Vue 动画原理（列表过渡）

列表过渡

• 常用
• 怎么渲染整个列表，比如对：v-for列表进行渲染
• 答：使用<transition-group>组件

1.区别于transition

• 不同于 <transition>
  它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag attribute 更换为其他元素。
• 过渡模式不可用，因为我们不再相互切换特有的元素。
  也就是mode=out-in
• 内部元素总是需要提供唯一的 key attribute 值。
  如果key没有提供，或者不是唯一就会有bug
• CSS过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

1.动画

• <transition-group name="list" tag="p">
  1.name=‘list’：和之前一样，是css的前缀
  2.tag=“p”：这个group最后被替换成什么元素
• 将元素由span变成div时，动画移动方向改为translateX(100%)就可以实现左右消除一行内容

2.要点

• 使用transition-group标签
• 必须马上在里面接一个v-for循环
  如果在transition-group和for循环之间有其他非for循环的标签，则无法识别动画
• CSS动画原理和之前的transition一样