Vue中transition单个节点过渡与transition-group列表过渡全过程 Vue中transition单个节点过渡与

transition单个节点过渡与transition-group列表过渡
transition的过渡作用和transition-group

transition单个节点过渡与transition-group列表过渡

transition：只能满足单个节点的过渡效果，在多个节点的渲染上显得力不从心

为了更好适用于更多的场景，vue 提供来多个元素的过渡
首先创建了一个简单的应用，通过button来实现动态的加减，使用了啊你，实际效果可运行一下代码

{{item}}

transition-group：???????拥有transition所有属性

但是需要关注的是它们的不同之处：

transition本身不会渲染出元素
但是transition-group 会渲染出元素节点；默认tag属性为，可修改。

ps:transition-group 的元素必须指定key 属性
在列表元素的动态加入移除中，整个列表会因为元素的改变而相应的改变位子，这些位子属性的改变会很生硬，所以transition-group给出propmove-class; 支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它将会获取应用 CSS 移动类

.div1{width:156px; }.cla1{border:1px solid #222; display:inline-block; width:50px; height:50px; text-align: center; vertical-align: middle; }.flip-list-move {transition: transform 1s; }