在前面的博客我们一直在操作单个元素的过渡，如果是对多个元素过渡，例如列表，这时就要用到<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. 高仿QQ、微信效果的图片浏览器（支持原图和缩略图、多种手势、CocoaPods）

    感谢原文作者的分享 本文转载至 http://my.oschina.net/u/2406027/blog/735738 PYPhotoBrowser GitHub地址:https://github.c ...

  2. js - 伪数组转化为数组的几种方法整理（更新中...）

    伪数组:无法调用数组的方法,但是有length属性,又可以索引获取内部项的数据结构. 比如:arguments.getElementsByTagName等一系列dom获取的NodeList对象,他们 ...

  3. AS 常用快捷键

    上篇中我们讲了Android Studio如何添加插件,这篇我们讲讲AS的快捷键,这里我说明的快捷键都是最最实用的,希望刚刚加入AS的朋友尽快的熟悉一下这几个快捷键,这样可以帮助你提高coding的效 ...

  4. ssh: connect to host xx.xx.xxx.xxx port 22: Connection refused

    执行 ssh root@47.94.142.215 报错 首先要开启ssh 系统偏好设置-共享 选上远程登陆 选上远程管理 检测openssh-server是否安装成功 ,安装成功的如下 ps -e ...

  5. 关于linux - Centos 7 系统下使用PXE网络的方式（pxe+dhcpd+tftp+httpd）安装操作系统

    PXE(Pre-boot Execution Environment)是由Intel设计的协议,它可以使计算机通过网络而不是从本地硬盘.光驱等设备启动. 现代的网卡,一般都内嵌支持PXE的ROM芯片. ...

  6. 21.react 组件通信

    状态属性可以修改 this.setState()中可以写对象,也可以写方法 <script type="text/babel"> class Test extends ...

  7. mysql InnoDB锁等待的查看及分析

    说明:前面已经了解了InnoDB关于在出现锁等待的时候,会根据参数innodb_lock_wait_timeout的配置,判断是否需要进行timeout的操作,本文档介绍在出现锁等待时候的查看及分析处 ...

  8. JavaScript——this

    一.JavaScript 函数与方法 <body> <script type="text/javascript"> function show(){ con ...

  9. HR在ERP实施过程中的作用

    ERP实施涉及到部门职责.个人职责的改变,在实施过程中HR有着不可估量的作用: 实施制度设计 包括如何对实施人员的激励,对实施人员进行合理的岗位职责调整: 某些企业在实施ERP时自项目经理到关键用户都 ...

  10. python全栈开发 * 03 基本数据类型 * 180601

    python基本数据类型  ( int , bool , str ) 一  python基本数据类型    (一)int ==> 整数.进行数学运算     (二)str ==> 字符串. ...