React过渡动画-8

yarn安装 yarn add react-transition-group

react-transition-group 介绍

Transition

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

CSSTransition

CSSTransition 是基于Transition组件构建的;
在执行的过程中有三个状态:appear,enter,exit;

三种状态需要定义对应的CSS样式:
开始状态,对应的类是 -appear、-enter、-exit;
执行状态,对应的类是 -appear-active、-enter-active、-exit-active;
结束状态,对应的类是 -appear-done、-enter-done、-exit-done;

CSSTransition常见对应的属性

in: 触发进入或者退出状态,布尔值;
当in为true时,触发进入状态,会添加-enter、-enter-acitve的class开始执行动画,当动画执行结束后,会移除两个class,并且添加-enter-done的class;
当in为false时,触发退出状态,会添加-exit、-exit-active的class开始执行动画,当动画执行结束后,会移除两个class,并且添加-enter-done的class;
classNames:动画class的名称;
timeout:过渡动画的时间,控制类添加的时间;
appear:是否在初次进入添加动画(需要和in同时为true);
unmountOnExit:该组件是否在执行退出动画结束后被移除掉;

CSSTransition对应的钩子函数

onEnter:在进入动画之前被触发;
onEntering:在进入动画时被触发;
onEntered:在进入动画完成后被触发;
onExit:在退出动画之前被触发;
onExiting:在退出动画时被触发;
onEnxited:在退出动画完成后被触发;

SwitchTransition

两个组件显示和隐藏切换时,使用该组件;
两个组件之间切换的炫酷动画;

SwitchTransition常见对应的属性

mode,有两个值
in-out: 表示新组件先进入,旧组件再移除;
out-in: 表示就组件先移除,新组建再进入;

如何使用SwitchTransition

SwitchTransition组件里面要有CSSTransition或者Transition组件,不能直接包裹你想要切换的组件;
SwitchTransition里面的CSSTransition或Transition组件不再像以前那样接受in属性来判断元素是何种状态,取而代之的是key属性

TransitionGroup

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

你可能感兴趣的:(React,react,前端)