Vue中提供了<transition>和<transition-group>来为元素增加过渡动画。文档写的很清楚，但是实际使用起来还是费了一番功夫。这里做一个简单的记录:
单个过渡使用<transition>元素把要过渡的部分包裹起来，<transition>不会在DOM中渲染出来，只是做一个标记。其中常用的属性主要是：
- name : 匹配相应的过渡类名，当没有name的时候默认为v-enter,v-leave-active等
- mode:控制离开/进入的先后顺序，out-in或者in-out
多个元素过渡的时候使用<transition-group>元素把要过渡的部分包裹起来，<transition-group>会在DOM中渲染一个新的元素，把要过渡的这多个部分包裹起来，渲染的元素默认是span，可以使用tag属性来设置。常用的属性是：
- tag: 默认为span，实际使用的时候，可以设置为要过渡的部分的父元素的类型。
- name：过渡类名，同上
注意，<transition-group>的每个子节点必须有独立的key，动画才能正常工作。并且这里的key需要是item的一部分才可以，如item.id。我偷懒想用循环的index，会bug。该bug具体表现为：当你删除多个节点中的任意一个时，动画永远发生在最后一个节点身上。