Skip to content

useTransition 过渡

Vue 3 的过渡系统已经相当好用和简洁了,但是有时候我们还需要在 v-ifv-show 之外使用过渡。

因而,我们提供了 useTransition 组合式方法,用于在任何时候使用过渡。

css 过渡

useTransition 的第一个参数是过渡方式,有 cssstyle 两种。

使用 css 过渡时,需要使用 name 属性指定过渡的名称,target 属性指定过渡的目标元素。这时跟你在 Vue 3 中使用 transition 组件时体验是一样的, 只不过 useTransition 方法需要你调用 返回的 toggle 或者 enterleave 方法去触发进入和离开状态。

其中 nametarget 是必选参数,keepEnterTo 是可选参数,用于指定是否保留过渡后的状态。nametarget 可以是一个 Vue 响应式对象(即用 ref 或 shallowRef 包裹的值)。

基于 MIT 协议