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 复制代码
下班了,明天再接着写
相关推荐
im_AMBER1 小时前
React 04
前端·react.js·前端框架·1024程序员节
im_AMBER7 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
web打印社区20 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗20 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
楊无好1 天前
React中ref
前端·react.js
诚实可靠王大锤1 天前
react-native实现多列表左右滑动+滚动TabBar悬停
javascript·react native·react.js·1024程序员节
打小就很皮...1 天前
Steps + Input.TextArea + InfiniteScroll 联调优化
前端·react.js
皓月Code1 天前
第四章、路由配置
前端·javascript·react.js·1024程序员节
皓月Code1 天前
第二章、全局配置项目主题色(主题切换+跟随系统)
javascript·css·react.js·1024程序员节
楊无好2 天前
react中的受控组件与非受控组件
前端·react.js