Skip to content

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

名称类型默认值说明
transitionPropNamestring'fade'过渡动画的属性名
transitionModeBaseTransitionProps['mode']'out-in'过渡模式
transitionAppearbooleantrue是否在初始渲染时执行过渡动画

Released under the MIT License.