RTransitionComponent 过渡动画路由组件

让你的页面切换更有意思点。

提示

该过渡效果组件，会在页面切换时，自动添加过渡动画。这也就意味着，多个路由切换的时候，都会添加动画，所以需要合理使用该组件。

基础使用

css

.demo-transform-leave-active,
.demo-transform-enter-active {
  transition: all 0.48s cubic-bezier(0.4, 0, 0.2, 1);
}

.demo-transform-enter-from {
  opacity: 0;
  transform: scale(1.2);
}

.demo-transform-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

tsx

import { RTransitionComponent } from '@/components'

const Demo = () => {
  return (
    <RTransitionComponent transitionPropName={'demo-transform'}>
      hi
    </RTransitionComponent>
  )
}

props

名称	类型	默认值	说明
transitionPropName	`string`	`'fade'`	过渡动画的属性名
transitionMode	`BaseTransitionProps['mode']`	`'out-in'`	过渡模式
transitionAppear	`boolean`	`true`	是否在初始渲染时执行过渡动画

RTransitionComponent 过渡动画路由组件 ​

基础使用 ​

props ​

RTransitionComponent 过渡动画路由组件

基础使用

props