<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 元素,也不会出现在可被检查的组件层级中。
<!-- 单个元素 --> <transition> <div v-if="ok">toggled content</div> </transition> <!-- 动态组件 --> <transition name="fade" mode="out-in" appear> <component :is="view"></component> </transition> <!-- 事件钩子 --> <div id="transition-demo"> <transition @after-enter="transitionComplete"> <div v-show="ok">toggled content</div> </transition> </div>
const app = Vue.createApp({ ... methods: { transitionComplete (el) { // 因为传递了'el'的DOM元素作为参数 } } ... }) app.mount('#transition-demo')