免费获取

获取 Demo 源代码请在公众号回复“react-transition-group” 。

预览

https://code.ifrontend.net/case/transition-react/#

React 页面过渡效果库

一个优雅的 React 页面过渡效果库，提供多种精美的页面切换动画，让你的应用更具交互性和视觉吸引力。

✨ 特性

• 🎨 10+ 精心设计的过渡效果
• 🚀 基于 React Transition Group
• 📱 移动端友好
• 🎯 简单易用
• 🎭 流畅的动画效果
• 🎮 可自定义的动画参数

🎯 过渡效果预览

基础效果

• 滑入 (Slide Over): 页面从右侧滑入，左侧滑出
• 上滑 (Slide Up): 页面从底部滑入，顶部滑出
• 缩放 (Fade Scale): 优雅的缩放淡入淡出效果

3D 效果

• 翻转 (Flip): 3D 翻转效果，带有立体感
• 魔方 (Cube): 真实的 3D 魔方旋转效果
• 折叠 (Fold): 左右方向的 3D 折叠效果
• 翻页 (Turn): 从右往左的翻页效果
• 圆筒 (Cylinder): 圆柱体旋转效果

特殊效果

• 旋转 (Rotate Scale): 旋转缩放组合效果
• 弹跳 (Bounce): 带有弹性的缩放效果

🚀 快速开始

安装

npm install react-transition-group

使用方法

1. 在组件中引入 TransitionGroup 和 CSSTransition：

import { TransitionGroup, CSSTransition } from "react-transition-group";

2. 在布局组件中使用：

<TransitionGroup>
  <CSSTransition key={location.key} timeout={400} classNames="page-slide-over">
    <div className="page">{/* 你的页面内容 */}</div>
  </CSSTransition>
</TransitionGroup>

3. 添加 CSS 样式：

/* 引入过渡效果样式 */
@import "./index.css";

🎨 自定义效果

每个过渡效果都可以通过修改 CSS 变量来自定义：

• 动画时长
• 缓动函数
• 变换参数
• 透明度
• 3D 效果参数

📱 移动端适配

所有过渡效果都经过移动端优化：

• 合适的动画时长
• 流畅的性能表现
• 适当的动画幅度
• 优化的 3D 效果

🎯 最佳实践

1. 选择合适的过渡效果：

• 基础页面切换：使用滑入或上滑效果
• 重要内容展示：使用缩放或弹跳效果
• 特殊场景：使用 3D 效果

1. 性能优化：

• 避免同时使用多个 3D 效果
• 适当控制动画时长
• 注意移动端性能

1. 用户体验：

• 保持动画流畅性
• 避免过于夸张的效果
• 考虑用户设备性能