码迷,mamicode.com
首页 > 其他好文 > 详细

Vue的内置组件transition

时间:2020-07-10 11:27:05      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:rop   页面   script   过程   tran   leave   boolean   als   false   

官网解释

<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在可被检查的组件层级中。

Props

  • name - string,用于自动生成 CSS 过渡类名。例如:name: ‘fade‘ 将自动拓展为 .fade-enter.fade-enter-active 等。默认类名为 "v"
  • appear - boolean,是否在初始渲染时使用过渡。默认为 false
  • css - boolean,是否使用 CSS 过渡类。默认为 true。如果设置为 false,将只通过组件事件触发注册的 JavaScript 钩子。
  • type - string,指定过渡事件类型,侦听过渡何时结束。有效值为 "transition""animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
  • mode - string,控制离开/进入过渡的时间序列。有效的模式有 "out-in""in-out";默认同时进行。
  • duration - number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下,Vue 会等待过渡所在根元素的第一个 transitionendanimationend 事件。

用法

  • v-if/v-show控制显示隐藏,使用transition 组件控制其变化过程
  • 一个页面子组件router-view的消失隐藏,使用transition 组件控制其变化过程

实例:

<template>
// 子组件
    <transition name="fade1">
      <router-view></router-view>
    </transition>

// if/show控制
    <transition name="fade2">
      <p v-show="isTage"></p>
    </transition>
</template>

Vue的内置组件transition

标签:rop   页面   script   过程   tran   leave   boolean   als   false   

原文地址:https://www.cnblogs.com/xyf724/p/13278212.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!