zoukankan      html  css  js  c++  java
  • vue--transition-group

    1.为什么要使用<transition-group>

    <transition></transition>是vue封装的过渡组件

    <transition name="fade" mode="out-in"> //mode="out-in"模式先出后进
        <router-view></router-view>
    </transition >

    css

    .fade-enter-active, .fade-leave-active {
      transition: opacity .4s
    }
    .fade-enter,.fade-leave-to {
      opacity: 0
    }

    这个组件里只有一个元素,当我们在其里面多加一具元素时,发生了什么

    浏览器里并不出现新加的内容。这是为什么?因为在vue里,<transition></transition>里只能放置一个元素

    但是如果我们想在一个过渡效果里放置多个元素时,怎么办

    用<transition-group></transition-group>

    2.<transition-group>的key属性

    当我们将<transition></transition>改成<transition-group></transition-group>,发现控制台里依然有错误提示—当<transition-group>里有多个元素时,需要给每个元素设置key值,并且每个key值是不能一样的。设置完后,页面就恢复正常了。

    <transition-group name="fade" mode="out-in">
        <router-view key="aa"></router-view>
        <div key="bb">merry christmas</div>
    </transition-group>

    3.<transition>和<transition-group>的区别

    <transition>里只能包裹一个元素

    <transition-group>可以包裹多个元素

    4.使用<transition-group>需要注意的点是

    包裹的元素必须要设置key值

    Key值不能设置成一样的

  • 相关阅读:
    SQL学习记录
    Python 函数和变量作用域
    Python 使用socket实现一对多通信
    Flask wtforms validate_on_submit() 无法返回值问题
    Flask WTForm BooleanField用法
    Python3 中的nonlocal用法
    Python 实现二进制循环效果
    Python 各种类型转换
    第一章:数据结构
    Python Challenge
  • 原文地址:https://www.cnblogs.com/vinieo/p/10178587.html
Copyright © 2011-2022 走看看