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

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。