在前面的博客我们一直在操作单个元素的过渡，如果是对多个元素过渡，例如列表，这时就要用到<transition-group>这个组件了；

如何使用：将要操作的列表元素放在<transition-group></transition-group>内，其他与<transition>基本一致； 注意：在<transition-group>的元素要指定个唯一的 :key 属性

例如：

代码：

<transition name='fade'>

            <div v-show="flag" class="mybtn"></div>

            <div v-show="flag" class="mybtn"></div>

            </transition>

提示的错误：

当然用了transition-group还不对

提示错误：子组件需要一个key

注意，它们的key值是数值，如果是一个字符型，需要在其vue代码中定义其属性，将属性定义为数值，当然子组件的key值不能一样的

最终修改后正确的效果：

实现两个组件的代码：

<div>

            <button @click="flag=!flag">显示/隐藏</button>

            <transition-group name='fade'>

            <div v-show="flag" class="mybtn" :key='a'></div>

            <div v-show="flag" class="mybtn" :key='b'></div>

            </transition-group>

    </div>

vue代码：

let vm=    new Vue({

                data:{

                    flag:false,

                    a:'',

                    b:''

                }

            }).$mount('div');

总的代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>15_列表过渡</title>

         <script type="text/javascript" src="../js/vue.js" ></script>

         <style>

         .mybtn{

             width: 100px;

             height: 100px;

             background-color: red;

             transform: translateX(50px);

         }

     .fade-enter-active,.fade-leave-active{

             transition: all 2s; 

         }

         .fade-enter{

             opacity: ;

                 transform: translateX(0px);

         }

         .fade-enter-to{

             opacity: ;

             transform: translateX(50px);

         }

         .fade-leave{

             opacity: ;

             transform: translateX(50px);

         }

         .fade-leave-to{

             opacity: ;

             transform: translateX(0px);

         }

         </style>

     </head>

     <body>

         <div>

             <button @click="flag=!flag">显示/隐藏</button>

             <transition-group name='fade'>

             <div v-show="flag" class="mybtn" :key='a'></div>

             <div v-show="flag" class="mybtn" :key='b'></div>

             </transition-group>

     </div>

     </body>

     <script>

         let vm=    new Vue({

                 data:{

                     flag:false,

                     a:'',

                     b:''

                 }

             }).$mount('div');

         </script>

 </html>

测试transition-group的使用

小案例

最终效果：

vue代码：

<script>

        let vm=    new Vue({

                data:{

                    flag:false,

                    a:'',

                    b:'',

                    numArray:[,,,,]

                },

                methods:{

                    addNum(){

                        let num=Math.ceil(Math.random()*);//向上取整

                        this.numArray.push(num);

                    },

                    removeNum(index){

                        this.numArray.splice(index,);

                    }

                }

            }).$mount('div');

        </script>

以上代码根据索引删除数字

<div>

            <button @click="addNum">添加数字</button>

            <transition-group name='fade'>

            <li v-for="(item,index) in numArray" :key="item">

                {{item}}

                <button @click="removeNum(index)">-</button>

                </li>

            </transition-group>

    </div>

在transition-group中默认是tag='span'

用到的样式：

<style>

    .fade-enter-active,.fade-leave-active{

    position: absolute;

            transition: all .5s; 

        }

        .fade-enter{

            opacity: ;

                transform: translateX(-20px);

        }

        .fade-enter-to{

            opacity: ;

        }

        .fade-leave{

            opacity: ;

        }

        .fade-leave-to{

            opacity: ;

            transform: translateX(20px);

        }

            .fade-move{

                transition: transform .5s;

            }

        </style>
        
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>15_列表过渡</title>

         <script type="text/javascript" src="../js/vue.js" ></script>

         <style>

     .fade-enter-active,.fade-leave-active{

     position: absolute;

             transition: all .5s; 

         }

         .fade-enter{

             opacity: ;

                 transform: translateX(-20px);

         }

         .fade-enter-to{

             opacity: ;

         }

         .fade-leave{

             opacity: ;

         }

         .fade-leave-to{

             opacity: ;

             transform: translateX(20px);

         }

             .fade-move{

                 transition: transform .5s;

             }

         </style>

     </head>

     <body>

         <div>

             <button @click="addNum">添加数字</button>

             <transition-group name='fade'>

             <li v-for="(item,index) in numArray" :key="item">

                 {{item}}

                 <button @click="removeNum(index)">-</button>

                 </li>

             </transition-group>

     </div>

     </body>

     <script>

         let vm=    new Vue({

                 data:{

                     flag:false,

                     a:'',

                     b:'',

                     numArray:[,,,,]

                 },

                 methods:{

                     addNum(){

                         let num=Math.ceil(Math.random()*);//向上取整

                         this.numArray.push(num);

                     },

                     removeNum(index){

                         this.numArray.splice(index,);

                     }

                 }

             }).$mount('div');

         </script>

 </html>

小案例总的代码

Vue基础进阶 之 列表过渡的更多相关文章

  1. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制

    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...

  2. vue 基础-->进阶 教程(1): 基础（数据绑定）

    第一章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  3. vue 基础-->进阶 教程(2): 指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  4. Vue基础进阶 之 过渡效果

    进入/离开过渡效果:Vue在插入.更新或移除DOM时,可以设置一些动画效果: 如何使用过渡效果:利用<transition></transition>组件将需要应用的过渡效果的 ...

  5. Vue基础-作用域插槽-列表组件

    Vue 测试版本:Vue.js v2.5.13 Vue 官网介绍作用域插槽时, 在 2.5.0+,slot-scope 能被用在任意元素或组件中而不再局限于 <template>. 作用域 ...

  6. vue 基础-->进阶 教程(2): 指令、自定义指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  7. Vue基础进阶 之 自定义指令

    自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...

  8. Vue基础进阶 之 实例方法--生命周期

    在上一篇博客中我们知道生命周期的方法: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听: vm.$nextTick:将方法中的 ...

  9. Vue基础进阶 之 实例方法

    常用的实例方法: 数据: vm.$set:设置属性值: vm.$delete:删除属性值: vm.$watch:观测数据变化: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destr ...

随机推荐

  1. JS设计模式——观察者模式（通俗易懂）

    Observer模式的概念 Observer模式是行为模式之一,它的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态. Observer模式提供给关联对象一种同步通信的手段 ...

  2. 二、Sql Server 基础培训《进度2-关于主键（知识点学习）》

    学习作业2: 问题1:主键都有哪些方式?   问题2:本次实战案例建立的主键采用哪种方式?   问题3:猜猜金蝶K3WISE建立的主键采用哪种方式?   问题4:谈谈手工主键增长设置具体实现思路?(选 ...

  3. Spark连接MongoDB之Scala

    MongoDB Connector for Spark Spark Connector Scala Guide spark-shell --jars "mongo-spark-connect ...

  4. shell for循环 多个变量

    需求:需要输出以下2开头的端口号和其对应的文件 like: port and port_k8s_xxx.conf 其脚本为: #! /bash/shell #以value_name=(value1 v ...

  5. flask使用pymysql连接MySQL，生成xls文件并下载到本地

    版本一:将MySQL数据写入到excel(xsl)文件并下载到默认文件夹(一般问电脑的下载文件夹里面),并显示特效到前端页面. flask框架连接MySQL,我们使用pymsql这个工具,如下操作: ...

  6. nginx_ssl_tomcat配置

    <Connector port="8090" protocol="HTTP/1.1" connectionTimeout="20000" ...

  7. JAVA课程课后作业03之作业一

    作业:使用类的静态字段和构造函数,可以跟踪某个类所创建对象的个数.请写一个类,在任何时候都可以向它查询“你已经创建了多少个对象?”. 代码: package TestJava; import java ...

  8. 寻求js

    寻找登录的post地址 在form表单中寻找action对应的url地址 post的数据是input标签中的name值作为键,真正的用户名密码作为值得字典,post的url地址就是action对应的u ...

  9. curl HTTP Header

      对于"User-Agent", "Cookie", "Host"这类标准的HTTP头部字段,通常会有另外一种设置方法.curl命令提供了 ...

  10. 谷歌浏览器（Chrome）禁止浏览器缓存 设置

    在开发项目期间用谷歌浏览器调试,他总是缓存我的css样式这个很气人啊,后经过摸索找到了方法,如下 先F12或者shift+ctrl+j 打开调试者工具,在找Network这个tab按钮,点击进入,勾选 ...