标签: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 会等待过渡所在根元素的第一个transitionend
或animationend
事件。
用法
- 用
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>
标签:rop 页面 script 过程 tran leave boolean als false
原文地址:https://www.cnblogs.com/xyf724/p/13278212.html