Vue的内置组件transition

Posted 2020-12-16 xyf724

官网解释

<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>