首页 » 技术文章 » 正文

react-transition-group动画库Transition组件使用

react-transition-group动画库

这个库包括3个组件:Transition,CSSTransition,TransitonGroup,今天做项目刚好用到了Transition组件,记录一下使用过程中的总结,另外两个组件用到了再做介绍。或者移步到react 官网动画库(react-transition-group)的新写法

CSS3的transition属性

该属性可以对元素里面的一个属性设置过渡动画,比如:transition: width 2s;

祥见:CSS3 transition 属性

  • transition-property 规定设置过渡效果的 CSS 属性的名称。
  • transition-duration 规定完成过渡效果需要多少秒或毫秒。
  • transition-timing-function规定速度效果的速度曲线。
  • transition-delay定义过渡效果何时开始。

Transition的属性

元素动画在出现和消失时各有3个阶段,可以为这些属性绑定自定义函数:

  • onEnter:进入(出现)开始时执行
  • onEntering:进入(出现)过程中执行
  • onEntered:进入(出现)结束执行
  • onExit:离开(消失)时执行
  • onExiting:离开(消失)过程中执行
  • onExited:离开(消失)结束执行

其他属性介绍:

  • addEndListener:属性可以监听出现的3个阶段执行完成或消失的3个阶段执行完成时执行该函数监听的自定义函数。

  • unmountOnExit:为true 代表退出的时候移除dom,也就是该元素dom动画执行完后直接删除该元素节点

  • appear:渲染的时候就直接执行动画,默认false

  • enter:设为true后,动画进入(出现)的三个阶段,前两个阶段onEnter,onEntering先执行,然后延迟一段时间再执行onEntered,可以简单的理解为动画进入(出现)时有个延迟

  • exit:设为true后,动画离开(消失)的三个阶段,前两个阶段onExit,onExiting先执行,然后延迟一段时间再执行onExited,可以简单的理解为动画离开(消失)时有个延迟

  • timeout:为上面的appear,enter,exit设置延迟时间

  • in:动画进入(出现),离开(消失)交替执行,点一下动画生效,再点一下动画失效

使用方法

<Transition>标签可是设置上面那些属性。标签内容包裹一个箭头函数,该函数有一个参数state(参数名随意设置),返回值就是要实现动画效果的元素,该元素可以设置style样式。

案例一

此案例是我测试的案例,通过下拉框的透明度实现一个下拉框出现和消失的效果:

案例一结束。

案例二

案例二结束。

参考网址

官方案例

react官网动画库(react-transition-group)的新写法

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据