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 复制代码
下班了,明天再接着写
相关推荐
巴巴_羊2 小时前
React Ref使用
前端·javascript·react.js
杨进军3 小时前
React 协调器 render 阶段
前端·react.js·前端框架
归于尽3 小时前
智能前端小魔术,让图片开口说单词
前端·react.js
杨进军3 小时前
React 中 root.render 与 unmount 函数的流程
前端·react.js·前端框架
杨进军5 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
Spider_Man7 小时前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
白瓷梅子汤10 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
1234Wu11 小时前
React Native 接入 eCharts
javascript·react native·react.js
小白变怪兽1 天前
一、react18+项目初始化(vite)
前端·react.js
然我1 天前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html