react动画库react-transition-group

一个用于在React中写组件动画的工具库。

npm-reactTransitionGroup、github-reactTransitionGroup、官方文档-animation

安装

1
2
# npm
npm i --save-dev react-transition-group

或

1
2
# yarn
yarn add react-transition-group

或直接引js
https://unpkg.com/react-transition-group/dist/react-transition-group.min.js

使用

1
2
3
import { CSSTransition, TransitionGroup } from 'react-transition-group'

// ...

组件

Transition过渡组件

Transition组件允许通过一个简单的声明API来描述一段时间内组件从一个状态到另一个状态的过渡变换。通常它用于组建安装及卸载的动画，不过也可以用于在适当时候的过渡状态。
Transition组件默认不会改变其呈现的组件的行为，它只跟踪组件的”enter(进入)”和”exit(退出)”状态，你也可以自己定义和改变这些状态。

通过下面这个例子我们可以在组件进入和退出时增加特定样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import {Transition} from 'react-transition-group'

const duration = 2000;

const defaultStyle = {
	transition: `opacity ${duration} ease-in-out`,
	opacity: 0
};

const transitionStyles = {
	entering: { opacity: 0 },
	entered: { opacity: 1 }
};

const Fade = ({ in: inProp }) => (
	<Transition 
		in={inProp}
		timeout={duration}
	>
		{
			state => (<div
				style={{
					...defaultStyle,
					...transitionStyles[state]
				}}
			>
				I'm a fade Transition.
			</div>)
		}
	</Transition>
)

如前所述，Transition组件本身不会对其子组件做任何事情。它所做的是跟踪一段时间内的转换状态，以便您可以在组件更改状态时更新组件（例如通过添加样式或类）。

Transition的主要四种状态：

  • entering
  • entered
  • exiting
  • exited

Transition的状态通过in属性切换。当in属性的值是true时组件开始”enter”状态，在这个状态里，组件将从当前过渡状态转换为”entering”的过渡状态，然后在其状态完成后转换为”entered”阶段。我们看下面这个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//...
	state = {
		in: false
	};
	
	toggleEnterState = () => {
		this.setState({ in: true });
	}
	
	render () {
		return (
			<div>
				<Transition in={this.state.in} timeout={500} />
				
				<button onClick={this.toggleEnterState}>Click to Enter</button>
			</div>
		);
	}
//...

当点击button时，组件将进入”entering”状态并且保持该状态500ms（timeout属性），然后组件将进入到”entered”状态。

当in属性的值变为false时，组件状态将变为从”exiting”到”exited’。

对于简单的变化，Transition组件是足够的，但处理复杂的变换状态时就需要CSSTransition组件了。

CSSTransition

此过渡组件用于CSS动画过渡，灵感来源于优秀的ng-animate库。

CSSTransition包含以下过渡状态：appear(出现)，enter(进入)，exit(退出)时，CSSTransition组件通过了一系列className名来对这些动作进行描述。首先appear被应用到组件className上，接着添加“active”类名来激活CSS动画。在动画完成后，原class改变为done表明组件动画已经应用完成并加载完成。

当in属性的值是true时组件开始添加example-enter的CSS class并且在下一刻添加example-enter-active的CSS class。这是一个基于类名属性的约定。

Props

classNames

string | { appear?: string, appearActive?: string, enter?: string, enterActive?: string, enterDone?: string, exit?: string, exitActive?: string, exitDone?: string, }

当组件进入、退出或完成转换时应用于该组件的动画类名。可以提供一个单独的名称，并为每个阶段添加后缀：例如

1
classNames="fade"

对于的class为

  • fade-enter
  • fade-enter-active
  • fade-enter-done
  • fade-exit
  • fade-exit-active
  • fade-exit-done
  • fade-appear
  • fade-appear-active

每个单独的类名也可以单独指定如：

1
2
3
4
5
6
7
8
9
10
classNames={{
	appear: 'my-appear',
	appearActive: 'my-active-appear',
	 enter: 'my-enter',
	 enterActive: 'my-active-enter',
	 enterDone: 'my-done-enter,
	 exit: 'my-exit',
	 exitActive: 'my-active-exit',
	 exitDone: 'my-done-exit,
}}

onEnter

Function(node: HtmlElement, isAppearing: bool)

“enter”或”appear”出现时的回调函数。

onEntering

Function(node: HtmlElement, isAppearing: bool)

“enter-active”或”appear-active”出现的回调函数。

onEntered

Function(node: HtmlElement, isAppearing: bool)

“enter”或”appear”的class被移除且”done”class被添加到DOM节点时的回调函数。

onExit

Function(node: HtmlElement)

“exit”出现时的回调函数。

onExiting

Function(node: HtmlElement)

“exit-active”出现时的回调函数。

onExited

Function(node: HtmlElement)

“exit”class被移除且”exit-done”被添加到DOM节点时的回调函数。

TransitionGroup

TransitionGroup组件管理一组Transition组件，与Transition组件一样，TransitionGroup是一个状态机，用于管理组件随时间的安装和卸载。
考虑下面的示例，使用前向淡入淡出的CSS转换。当项目被删除或添加到todolist中时，in属性将由TransitionGroup自动切换。

您可以在TransitionGroup中使用任何Transition组件，而不仅仅是CSS。

注意，TransitionGroup不定义任何动画行为，列表项动画的具体方式取决于各个组件。这意味着您可以在不同的列表项中混合和匹配动画。

props

component

type: any, default: ‘div’

TransitionGroup默认渲染一个div元素，你可以通过该属性改变其表现。如果你使用React v16以上的版本并希望避免包装div元素，则可以传入component=null。如果包装分区借用了CSS样式，这将非常有用。

children

type: any

当一组Transition组件在离开时进行切换，此时TransitionGroup将注入特定的转换props。因此如果像刚才的<fade>组件哪有包装了Transition组件则请记住将它们分离开来。

appear

type: boolean

为所有子级启用或禁用”appear”动画的便利属性。请注意，指定此选项将覆盖在单个子转换上设置的任何默认值。

enter

type: boolean

为所有子级启用或禁用”enter”动画的便利属性。请注意，指定此选项将覆盖在单个子转换上设置的任何默认值。

exit

type: boolean

为所有子级启用或禁用”exit”动画的便利属性。请注意，指定此选项将覆盖在单个子转换上设置的任何默认值。

childFactory

type: Function(child: ReactElement) -> ReactElement。default: child => child

你可能需要在子组件退出时对其应用反应式更新。这通常是通过使用cloneElement来完成的，但是在退出子元素的情况下，元素已经被删除，使用者无法访问。

如果您确实需要在子组件退出时更新它，您可以提供一个子组件工厂来包装每个子组件，甚至是那些离开的子组件。