在前面的博客我们一直在操作单个元素的过渡，如果是对多个元素过渡，例如列表，这时就要用到<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. php.ini 开发和线上配置的差异

    比对了一下php自带的php.ini-development和php.ini-production,备忘. display_errors = Ondisplay_startup_errors = On ...

  2. Java | 原来 serialVersionUID 的用处在这里

    本文首发于 http://youngzy.com/ 一直不太明白Java对象里 serialVersionUID 字段是做什么用的.有或者没有,它们之间有差别吗?除了Eclipse里提示的那个黄色的警 ...

  3. 【CF666C】Codeword 结论题+暴力

    [CF666C]Codeword 题意:一开始有一个字符串s,有m个事件,每个事件形如: 1.用一个新的字符串t来替换s2.给出n,问有多少个长度为n的小写字母组成的字符串满足包含s作为其一个子序列? ...

  4. 进程池原理及效率测试Pool

    为什么会有进程池的概念? 当我们开启50个进程让他们都将100这个数减1次减到50,你会发现特别慢! 效率问题,原因: 1,开辟内存空间.因为每开启一个进程,都会开启一个属于这个进程池的内存空间,因为 ...

  5. I - All X

    F(x,m) 代表一个全是由数字x组成的m位数字.请计算,以下式子是否成立: F(x,m) mod k ≡ c Input 第一行一个整数T,表示T组数据. 每组测试数据占一行,包含四个数字x,m,k ...

  6. window10安装composer

    第一步: 在https://getcomposer.org/download/页面下的Manual Download里下载最新的版本. 下载下来的是composer.phar文件,把这个文件放在你的p ...

  7. hibernate09--连接查询

    创建实体类 package cn.bdqn.bean; import java.util.ArrayList; import java.util.Date; import java.util.List ...

  8. IsWindowVisible

    IsWindowVisible通过该函数可以获得指定窗口的可视状态,即显示或者隐藏. BOOL IsWindowVisible( HWND hWnd ); hWnd:被测试窗口的句柄. 返回值:如果指 ...

  9. Python学习之旅（二十八）

    Python基础知识(27):常用内建模块(Ⅲ) 1.urlblib urllib提供了一系列用于操作URL的功能 url是统一资源定位符,对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示, ...

  10. 搭建svn服务器的坑

    第一次搭建,能启动,就是连接不了 原因:修改配置文件(所有文字前面不能有空格,等号必须空格)