脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → transition单个节点与transition-group列表过渡全

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

 更新时间：2022年04月09日 09:25:16   作者：努力_才幸福  
这篇文章主要介绍了Vue中transition单个节点过渡与transition-group列表过渡全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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

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

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

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

<body>  
       <div id="app">  
       <button @click="add">add</button>  
       <button @click="move">remove</button>  
           <transition-group  
           name="list"  
           enter-active-class="animated bounceInDown"  
           leave-active-class="animated bounceOut"  
           >  
               <li v-for="item in num" :key="item">{{item}}</li>  
           </transition-group>  
       </div>  
  
   </body>  
   <script>  
       var app=new Vue({  
           el:"#app",  
           data:{  
               show:true,  
               num:10,  
               statu:false  
           },  
           methods:{  
               add:function(){  
                     this.num++;  
                   },  
               move:function(){  
                   this.num--;  
               }  
           }  
       });  
   </script>  
  • transition-group：​​​​​​​拥有transition所有属性

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

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

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

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

      <style>  
        .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;  
}  
        </style>  
    <body>  
        <div id="app">  
        <button @click="chang">reverse</button>  
        <transition-group tag="div" class="div1" name="flip-list">  
            <span class="cla1" v-for="item in list" :key="item">{{item}}</span>  
        </transition-group>  
  
        <button @click="add">add</button>  
        <button @click="move">remove</button>  
            <transition-group  
            tag="ul"  
            name="flip-list"  
            enter-active-class="animated bounceInDown"  
            leave-active-class="animated bounceOut"  
            >  
                <li v-for="(item,index) in num" :key="item">{{item}}={{index}}</li>  
            </transition-group>  
        </div>  
    </body>  
    <script>  
    function shuffle(arr){  
    var result = [],  
        random;  
    while(arr.length>0){  
        random = Math.floor(Math.random() * arr.length);  
        result.push(arr[random])  
        arr.splice(random, 1)  
    }  
    return result;  
}  
        var app=new Vue({  
            el:"#app",  
            data:{  
                show:true,  
                n:3,  
                num:[1,2,3],  
                list:[1,2,3,4,5,6,7,8,9],  
                statu:false  
            },  
            methods:{  
                chang:function(){  
                    this.list=shuffle(app.list);  
                },  
                add:function(){  
                      this.num.splice(3,0,++this.n)  
                    },  
                move:function(){  
                     this.num.splice(3,1)  
                     console.log(this.num)  
                }  
            }  
        });  
    </script>  

transition的过渡作用和transition-group

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

  • transition：里的 name 值fade 就是 .fade-enter-active,类名开头的 fade，
<transition name="fade" mode="out-in">
   <router-view/>
   <router-view class="left" name="nav" />
   <router-view class="right" name="con" />
</transition>
      
.fade-enter-active, .fade-leave-active {
  transition:opacity .4s;
}
.fade-enter, .fade-leave-to {
  opacity:0;
}

注意：transition 里面的<div key="c">111222</div>的内容是不显示，如果要显示内容需要把 transition 标签换成 transition-group 标签，

  • transition-group：标里的所有子元素都要有key值，不然过渡效果是显示不出来的，而且每个子元素标签的key值是不一样的，不能重复。
<transition-group name="aaa" mode="in-out">
    <router-view key="d"/>
    <router-view class="left" name="nav" key="a" />
    <router-view class="right" name="con" key="b" />
    <div key="c">111222</div>
</transition-group>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。 

您可能感兴趣的文章:

相关文章

  • vue+axios 前端实现的常用拦截的代码示例

    vue+axios 前端实现的常用拦截的代码示例

    这篇文章主要介绍了vue+axios 前端实现的常用拦截的代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 使用 vue 实现灭霸打响指英雄消失的效果附demo

    使用 vue 实现灭霸打响指英雄消失的效果附demo

    这篇文章主要介绍了使用 vue 实现灭霸打响指英雄消失的效果 demo,需要的朋友可以参考下
    2019-05-05
  • vue实现的上拉加载更多数据/分页功能示例

    vue实现的上拉加载更多数据/分页功能示例

    这篇文章主要介绍了vue实现的上拉加载更多数据/分页功能,涉及基于vue的事件响应、数据交互等相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • 降低vue-router版本的2种解决方法实例

    降低vue-router版本的2种解决方法实例

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,下面这篇文章主要给大家介绍了关于降低vue-router版本的2种解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • Vue中插槽和过滤器的深入讲解

    Vue中插槽和过滤器的深入讲解

    Vue插槽,是学习vue中必不可少的一节,越来越发现插槽的好用,而过滤数据也是我们日常开发中必然会用到的,这篇文章主要给大家介绍了关于Vue插槽和过滤器的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-07-07
  • vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native

    vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native

    今天小编就为大家分享一篇vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue实现可拖拽的dialog弹框

    vue实现可拖拽的dialog弹框

    element的dialog弹框在项目中挺常用的。拖拽形式的弹框会提高用户体验，本文实现了vue可拖拽的dialog弹框，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 解决el-date-picker日期选择控件少一天的问题

    解决el-date-picker日期选择控件少一天的问题

    这篇文章主要介绍了解决el-date-picker日期选择控件少一天的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • 浅谈Vue灰度发布新功能的使用

    浅谈Vue灰度发布新功能的使用

    本文主要介绍了浅谈Vue灰度发布新功能的使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue复合组件实现注册表单功能

    vue复合组件实现注册表单功能

    这篇文章主要为大家详细介绍了vue复合组件实现注册表单功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11

最新评论