react 的过渡动画

一、React的过渡动画

1、react-transition-group

在开发中,我们想要给一个组件的显示和消失,添加某种过渡动画,可以很好的增加用户体验,

React社区为我们提供了react-transition-group用来完成过渡动画,

React曾为开发者提供过动画插件react-addons-css-transition-group,后由社区维护,形成了现在的 react-transition-group

这个库可以帮助我们方便的实现,组件的 入场 和 离场 动画,

使用时需要进行额外的安装,如下:npm install react-transition-group --save

2、主要组件

  • Transition:该组件是一个和平台无关的组件(不一定要结合CSS)

    在前端开发中,一般是结合CSS来完成样式,所以比较常用的是CSSTransition

  • CSSTransition:在前端开发中,通常使用 CSSTransition 来完成过渡动画效果

    如果只有一个组件,直接使用这个即可

  • SwitchTransition:两个组件显示和隐藏切换时,使用该组件

  • TransitionGroup:将多个动画组件包裹在其中,一般用于列表中元素的动画

CSSTransition

CSSTransition 是基于 Transition组件构建的,

  • CSSTransition执行过程中,有三个状态:appearenterexit

    这三种状态,需要定义对应的CSS样式:

    第一类,开始状态:对应的类是 -appear、-enter、-exit

    第二类:执行动画:对应的类是 -appear-active、-enter-active、-exit-active

    第三类:执行结束:对应的类是 -appear-done、-enter-done、-exit-done;

  • 常见属性如下:

  1. in:触发进入或者退出状态
javascript 复制代码
0、如果添加了 unmountOnExit={true} ,那么,该组件会在执行退出动画结束后被移除掉;
	
1、当in为true时,
   触发进入状态,会添加 -enter、-enter-acitve 的class,开始执行动画
   当动画执行结束后,会移除两个class,并且添加 -enter-done 的class

2、当in为false时,
   触发退出状态,会添加 -exit、-exit-active 的class,开始执行动画
   当动画执行结束后,会移除两个class,并且添加 -enter-done 的clas
  1. classNames:动画class的名称
javascript 复制代码
决定了在编写css时,对应的class名称:
比如,`card-enter、card-enter-active、card-enter-done`
  1. unmountOnExit:退出后卸载组件

  2. appear:是否在初次进入添加动画(需要和 in同时为true)

  3. timeout:过渡动画的时间

  4. 对应的钩子函数,为了在动画的执行过程,来完成一些JavaScript的操作

javascript 复制代码
`onEnter`:在进入动画之前,被触发
		
`onEntering`:在应用进入动画时,被触发

`onEntered`:在应用进入动画结束后,被触发

`onExit`:离开动画之前,被触发

`onExiting`:离开动画时,被触发

`onExited`:离开动画之后,被触发

CSSTransition的示例

javascript 复制代码
下班了,明天再接着写
相关推荐
今禾11 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
我想说一句11 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
码间舞11 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
爱编程的喵14 小时前
深入理解JSX:从语法糖到React的魔法转换
前端·react.js
海底火旺15 小时前
单页应用路由:从 Hash 到懒加载
前端·react.js·性能优化
G等你下课19 小时前
你还在 import { Button } from './components'?
前端·react.js
挽淚19 小时前
AI对话+React 项目实战(半成品)
javascript·react.js
PineappleCoder19 小时前
React函数组件的"生活管家"——useEffect Hook详解
前端·react.js
G等你下课19 小时前
React 中的 Diff 算法:理解虚拟 DOM 的高效更新机制
前端·react.js
PineappleCoder19 小时前
当 useContext 牵手 useReducer,我悟了前端状态管理的「丝滑密码」
前端·react.js