使用CSS3 提供的transition 与 animation 可以实现动画效果,但是在一些复杂效果时,还是需要借助js的,这儿介绍一下react 的动画框架,更方便的写一些动画。
react-transition-group 是react 的一个第三方模块。借助这个模块,可以实现更加复杂的动画效果。
可以在GitHub 上找到这个项目。https://github.com/reactjs/react-transition-group
然后上面的文档里,说明了如何使用 (https://reactcommunity.org/react-transition-group/)
然后呢,我们主要是看 CSSTransition 的部分。
首先我们将第十一行代码复制下来。放到js 文件里。如下 App.js 中。
import React, { Component, Fragment } from 'react'
import { CSSTransition } from 'react-transition-group';
import './style.css'
然后继续修改App.js 如下。
import React, { Component, Fragment } from 'react'
import { CSSTransition } from 'react-transition-group';
import './style.css'
class App2 extends Component {
constructor(props) {
super(props);
this.state = {
show: true
}
this.handleToggle = this.handleToggle.bind(this)
}
render() {
return (
<Fragment>
<CSSTransition
in={this.state.show}
timeout={500}
classNames='fade'
>
<div>hello</div>
</CSSTransition>
<button onClick={this.handleToggle}>toggle</button>
</Fragment>
)
}
handleToggle() {
this.setState({
show: this.state.show ? false : true
})
}
}
export default App2;
更改style.css 如下。
.fade-enter {
/*入场*/
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: opacity 1s ease-in;
}
.fade-enter-done {
opacity: 1;
}
.fade-exit {
/*出场*/
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: opacity 1s ease-in;
}
.fade-exit-done {
opacity: 0;
}
这个工具还有很多很好的功能比如说钩子函数,再去探索吧。
还有一项,当我们要做多个元素(li)的动画效果的时候,需要借助 TransitionGroup 配合 CSSTransition 一起使用。
import React, { Component, Fragment } from 'react'
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './style.css'
class App3 extends Component {
constructor(props) {
super(props);
this.state = {
list: []
}
this.handleAddItem = this.handleAddItem.bind(this)
}
render() {
return (
<Fragment>
<TransitionGroup>
{
this.state.list.map( (item, index) => {
return (
<CSSTransition
timeout={500}
classNames='fade'
key={index}
>
<div>{item}</div>
</CSSTransition>
)
})
}
</TransitionGroup>
<button onClick={this.handleAddItem}>toggle</button>
</Fragment>
)
}
handleAddItem() {
this.setState( (prevState) => {
return {
list: [...prevState.list, 'item']
}
})
}
}
export default App3;