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

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

为了更好适用于更多的场景，vue 提供 来多个元素的过渡

首先创建了一个简单的应用，通过button  来实现动态的加减，使用了啊你，实际效果可运行一下代码

           
           add           remove                                  
{{item}}
                          
             

• transition-group：​​​​​​​拥有transition所有属性

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

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

ps:transition-group 的元素必须指定key 属性

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

                
            reverse                            {{item}}                            add            remove                                    
{{item}}={{index}}
                            
          

transition的过渡作用和transition-group

标签有两个属性，name 属性和 mode 属性。

• transition：里的 name 值fade 就是 .fade-enter-active,类名开头的 fade，

                           .fade-enter-active, .fade-leave-active {    transition:opacity .4s;  }  .fade-enter, .fade-leave-to {    opacity:0;  }

注意：transition 里面的

• transition-group：标里的所有子元素都要有key值，不然过渡效果是显示不出来的，而且每个子元素标签的key值是不一样的，不能重复。

                        
111222