Transition

为元素或组件添加进入/离开过渡动画。

Props

interface TransitionProps extends BaseTransitionProps {
  children: View
  mode?: 'out-in' | 'in-out'
}

属性	类型	默认值	说明
`children`	`View`	—	子内容
`mode`	`'out-in' \| 'in-out'`	—	过渡模式
`name`	`string`	`'v'`	过渡 CSS 类名前缀
`appear`	`boolean`	`false`	是否在初始渲染时应用过渡
`css`	`boolean`	`true`	是否使用 CSS 过渡类
`duration`	`TransitionDuration`	—	显式指定过渡时长
`type`	`'transition' \| 'animation' \| 'auto'`	`'auto'`	过渡类型

TransitionDuration

type TransitionDuration = number | { enter: number; leave: number }

JavaScript 钩子

属性	类型	说明
`onBeforeEnter`	`(el: Element) => void`	进入前
`onEnter`	`(el: Element, done: () => void) => void`	进入中
`onAfterEnter`	`(el: Element) => void`	进入后
`onEnterCancelled`	`(el: Element) => void`	进入被取消
`onBeforeLeave`	`(el: Element) => void`	离开前
`onLeave`	`(el: Element, done: () => void) => void`	离开中
`onAfterLeave`	`(el: Element) => void`	离开后
`onLeaveCancelled`	`(el: Element) => void`	离开被取消
`onBeforeAppear`	`(el: Element) => void`	初始渲染进入前
`onAppear`	`(el: Element, done: () => void) => void`	初始渲染进入中
`onAfterAppear`	`(el: Element) => void`	初始渲染进入后
`onAppearCancelled`	`(el: Element) => void`	初始渲染进入被取消

CSS 类名

当 name 为 'v' 时，会自动应用以下 CSS 类：

阶段	类名
进入起始	`v-enter-from`
进入激活	`v-enter-active`
进入结束	`v-enter-to`
离开起始	`v-leave-from`
离开激活	`v-leave-active`
离开结束	`v-leave-to`

可通过自定义类名属性覆盖：

属性	说明
`enterFromClass`	进入起始类名
`enterActiveClass`	进入激活类名
`enterToClass`	进入结束类名
`leaveFromClass`	离开起始类名
`leaveActiveClass`	离开激活类名
`leaveToClass`	离开结束类名

示例

CSS 过渡：

tsx

import { Transition, ref } from 'vitarx'

function App() {
  const show = ref(true)

  return (
    <div>
      <button onClick={() => (show.value = !show.value)}>Toggle</button>
      <Transition name="fade">{show.value && <div class="box">Content</div>}</Transition>
    </div>
  )
}

css

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

JavaScript 钩子：

tsx

<Transition
  onEnter={(el, done) => {
    el.style.opacity = '0'
    requestAnimationFrame(() => {
      el.style.transition = 'opacity 0.3s'
      el.style.opacity = '1'
      setTimeout(done, 300)
    })
  }}
  onLeave={(el, done) => {
    el.style.opacity = '1'
    requestAnimationFrame(() => {
      el.style.transition = 'opacity 0.3s'
      el.style.opacity = '0'
      setTimeout(done, 300)
    })
  }}
>
  {show.value && <div>Content</div>}
</Transition>

TransitionGroup

为列表中的元素添加过渡动画，支持移动动画。

Props

interface TransitionGroupProps<T, Tag extends HostElementTag>
  extends
    BaseTransitionProps,
    Omit<ForProps<T>, 'onEnter' | 'onLeave' | 'onBeforeUpdate' | 'onAfterUpdate'> {
  tag?: Tag
  moveClass?: string
  props?: WithProps<Tag>
}

属性	类型	说明
`tag`	`HostElementTag`	容器标签名
`moveClass`	`string`	移动过渡的 CSS 类名

参考：Transition 详解