组件安装------CSSTransition部分
项目目录下使用命令行
npm install react-transition-group@1.x --save
安装组件。在需要使用动画的页面加入以下代码
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./style.css";
App.js部分
import React, { Component, Fragment } from "react";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./style.css";
class App extends Component {
constructor(props) {
super(props);
this.state = {
show:true,
list: []
};
this.handleAddItem = this.handleAddItem.bind(this);
}
render() {
return (
<Fragment>
<button onClick={this.handleAddItem}>Toggle</button>
<TransitionGroup>
{this.state.list.map((item, index) => {
return (
//将要显示动画的组件外面套上CSSTransition标签
<CSSTransition
in={this.state.show}//控制组件应用动画的属性值,通常将一个react的组件state赋值给它,
//通过改变state,从而开启和关闭动画
timeout={1000} //代表了整个的持续时间
classNames="fade" //对应CSS里面的'fade-'前缀,可以换成别的,对应的CSS前缀也要换
//classNames="fade"会被应用为fade-enter,fade-enter-active,fade-enter-done
//,fade-exit,fade-exite-active,fade-exit-done, fade-appear以及
//fade-appear-active.每一个独立的className都对应着单独的状态
unmountOnExit //添加这个属性之后当组件消失时将移除组件的DOM
onEntered={el => { //这个属性可以给动画播放完毕后的组件执行一次js函数
el.style.color = "blue";
}}
appear={true} //添加这个属性使组件第一次出现的时候(即页面刚加载时)也使用动画,
//对应css中的fade-appear和fade-appear-active样式
key={index}
>
<div>{item}</div>
</CSSTransition>
);
})}
</TransitionGroup>
</Fragment>
);
}
handleAddItem() {
this.setState(prevState => {
return {
list: [...prevState.list, "item"]
};
});
}
}
export default App;
CSS部分
.fade-enter,
.fade-appear {
opacity: 0;
}
.fade-enter-active,
.fade-apper-active {
opacity: 1;
transition: opacity 1s ease-in;
}
.fade-enter-done {
opacity: 1;
color: red;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: opacity 1s ease-in;
}
.fade-exit-done {
opacity: 0;
}
CSSTransition相关属性:
in
控制组件应用动画的属性值,通常将一个react的组件state赋值给它,通过改变state,从而开启和关闭动画
classNames|type:string
classNames[注意带s]属性用于当组件被应用动画时,不同的动画状态(enter,exits,done)将作为className属性的后缀来拼接为新的className,如: className="fade"会被应用为fade-enter,fade-enter-active,fade-enter-done,fade-exit,fade-exite-active,fade-exit-done, fade-appear以及fade-appear-active.每一个独立的className都对应着单独的状态,如:
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
<Transition>组件的回调函数,当组件enter或appear时会立即调用。
onEntering
也是一个过渡组件的回调函数,当组件enter-active或appear-active时,立即调用此函数
onEntered
同样是回调函数,当组件的enter,appearclassName被移除时,意即调用此函数
onExit
当组件应用exit类名时,调用此函数
onExiting
当组件应用exit-active类名时,调用此函数
onExited
当组件exit类名被移除,且添加了exit-done类名时,调用此函数