赛捷软件论坛's Archiver

vicky.yu 发表于 2024-3-1 09:39

#transition

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

页: [1]

Powered by Discuz! Archiver 7.2  © 2001-2009 Comsenz Inc.