当前位置:首页><transition>-渲染过度效果-vue内置组件API

<transition>-渲染过度效果-vue内置组件API

  • 更新时间 2025-07-21 11:36:07

  • Props:

    <transition>-渲染过度效果-vue内置组件API

    • name-string用于自动生成 CSS 过渡类名。例如:name:'fade'将自动拓展为.fade-enter,.fade-enter-active等。
    • appear-boolean,是否在初始渲染时使用过渡。默认为false。
    • persisted-boolean。如果是 true,表示这是一个不真实插入/删除元素的转换,而是切换显示/隐藏状态。过渡钩子被注入,但渲染器将跳过。相反,自定义指令可以通过调用注入的钩子(例如v-show)来控制转换。
    • 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事件。
    • enter-from-class-string
    • leave-from-class-string
    • appear-class-string
    • enter-to-class-string
    • leave-to-class-string
    • appear-to-class-string
    • enter-active-class-string
    • leave-active-class-string
    • appear-active-class-string
  • 事件:

    • before-enter
    • before-leave
    • enter
    • leave
    • appear
    • after-enter
    • after-leave
    • after-appear
    • enter-cancelled
    • leave-cancelled(仅v-show)
    • appear-cancelled
  • 用法:元素作为单个元素/组件的过渡效果。只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在可被检查的组件层级中。
toggled content

最新文章

随机文章