在前面的博客我们一直在操作单个元素的过渡，如果是对多个元素过渡，例如列表，这时就要用到<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. Inside The C++ Object Model(三)

    ============================================================================3-0. 类所占的内存大小受到三个因素的影响:( ...

  2. 9、socket.io,websocket 前后端实时通信,(聊天室的实现)

    websocket 一种通信协议 ajax/jsonp 单工通信 websocket 全双工通信 性能高 速度快 2种方式: 1.前端的websocket 2.后端的 socket.io 一.后端so ...

  3. java 三大框架 hibernate部分知识实现增删该查操作

    1.三层架构    表现层 web层(MVC是一个表现层的设计模型)    业务层 service层    持久层 dao层2.三大框架和三层架构的关系(建议学习三大框架的顺序:先学习hibernat ...

  4. php计算几分钟前、几小时前、几天前的几个函数

    函数方法: /*php计算几分钟前.几小时前.几天前的几个函数*/ function get_date($time){ $t=time()-$time; $f=array( '31536000'=&g ...

  5. python语法_if判断

    age_of_princal = 56 guess_age = int(input("e guess a age:")) if guess_age == age_of_princa ...

  6. 扫二维码登录实现原理，php版

    基础的逻辑图就是这样,但是实际情况还是有几种可能 比如QQ登录,微信登录,微博登录,基本设计都差不多,根据实际情况会有一些差异 问题是,如果设计合理的接口在保证数据的安全性和快速性 设计到的技术不复杂 ...

  7. JVM—内存溢出、OutOfMemoryError、StackOverflowError

    学习jvm时看到几篇非常好的系列文章,转载了: <深入理解Java虚拟机>学习小记一之自动内存管理机制(一) http://my.oschina.net/linuxfelix/blog/1 ...

  8. css 子盒子上下居中 文字溢出省略号

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JavaScript将字典序升序排列类似php中的ksort函数

    /** * 将json数据进行排序 * @param {*jason} data */ export function JsonSort(jsonData) { try { let tempJsonO ...

  10. 在window 2008r2开发服务器上安装MSMQ消息队列

    1.打开”服务器管理器“------”功能“-------”添加功能“,勾选”消息队列“,如下图: 如果之前已经勾选,则忽略此步. 2.”功能“------”消息队列“------”专有对列“---- ...