在前面的博客我们一直在操作单个元素的过渡，如果是对多个元素过渡，例如列表，这时就要用到<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. macOS Sierra(10.12.6), odoo(11.0), Python(3.5.4)配置

    欣闻odoo11支持python3环境了,赶紧在mac平台尝试一下: 前期设置,参考另篇文章:macOS Sierra 10.12.6 odoo 10.0 开发环境配置 因为odoo11尚未正式发布, ...

  2. Windows下安装配置Yaf框架的方法及创建典型合理的Demo目录结构

    Yaf是一个C语言编写的PHP框架,由鸟哥Laruence开发的高性能框架: Yaf官方文档:http://www.laruence.com/manual/index.html 第一步:安装PHP扩展 ...

  3. HTML禁止右键复制【两行代码实现】

    很多的站长朋友会考虑保护网站的内容不被人复制,或者是不被人轻易的复制,下面就来告诉如何用两行代码来做HTML禁止右键复制html的方法: document.oncontextmenu=new Func ...

  4. 进程池的同步与异步用法Pool

    进程池的同步,如下程序: from multiprocessing import Pool import time import os def func(n): print('start 进程 %s' ...

  5. ajax里的status和readystate

    先看ajax封装函数 function ajaxFunc(method,url,data,callback) { var xhr; if (XMLHttpRequest) { xhr = new XM ...

  6. H5选择颜色-前端颜色选择器

    开发一年多了,一直用angular2框架,框架虽然能大大减少程序员的工作量,但我还是更喜欢用原生的技术写代码. 原生的就像内功心法,框架是招式,招式虽然实用,但是想成为高手还是得有内功修养. 不多说, ...

  7. python开发 *进程数据隔离.守护进程,进程同步工具 * 180725

    进程数据隔离.守护进程,进程同步工具 一.进程之间的数据隔离: from multiprocessing import Process n=100 #主程序中变量n= def func(): glob ...

  8. 泡泡一分钟：Semantic Labeling of Indoor Environments from 3D RGB Maps

    张宁 Semantic Labeling of Indoor Environments from 3D RGB Maps Manuel Brucker,  Maximilian Durner,  Ra ...

  9. POJ 1426 - Find The Multiple - [DP][BFS]

    题目链接:http://poj.org/problem?id=1426 Given a positive integer n, write a program to find out a nonzer ...

  10. 图像分类（二）GoogLenet Inception_v2：Batch Normalization: Accelerating Deep Network Training by Reducing Internal Covariate Shift

    Inception V2网络中的代表是加入了BN(Batch Normalization)层,并且使用 2个 3*3卷积替代 1个5*5卷积的改进版,如下图所示: 其特点如下: 学习VGG用2个 3* ...