React react-transition-group动画库
2019-11-11 本文已影响0人
张思学
React react-transition-group 一个官网提供的动画过度库
网上关于react动画的很多答案都是老版本的,而现在官方提供的是叫react-transition-group
它是以前两个版本的合体。
地址:react-transition-group
- 安装
npm install react-transition-group --save
官方提供的三个组建Transition
,CSSTransition
,TransitonGroup
CSSTransition 此组件是在转换的出现、进入、退出阶段应用一对类名(也就是className),靠这个来激活CSS动画。所以参数和平时的className不同,参数为:classNames
参数:(主要)in, timeout, unmountOnExit, classNames
import React, {Component, Fragment} from 'react'
import {CSSTransition} from 'react-transition-group';
class App extends Component {
constructor(props) {
super(props)
this.state = {
show: true
}
this.toggle = this.toggle.bind(this)
}
render() {
return (
<Fragment>
{/* CSSTransition 是一个css动画组件,它会自动做一些class名字添加移除的工作
* in 入场动画 对应的css名字 .fade-enter
* timeout 动画执行时间
* className class前缀 (fade-****)
# unmountOnExit dom显示/移除
* onEntered 通过js完成一些事情 还有很多钩子具体看api
* appear 第一次展示的时候是否需要动画
*/}
<CSSTransition
in={this.state.show}
timeout={1000}
classNames='fade'
unmountOnExit
onEntered={(el)=>{
el.style.color = 'blue'
}}
appear={true}>
<div>hello</div>
</CSSTransition>
<button onClick={this.toggle}>toggle</button>
</Fragment>
)
}
toggle() {
this.setState(() => ({
show: !this.state.show
}))
}
}
export default App
TransitonGroup 是列表形态的动画了!但是TransitionGroup不提供任何形式的动画,具体的动画取决与你包裹的Transition || CSSTransition动画,所以你可以在列表里面做出不同类型的动画出来
import React, {Component, Fragment} from 'react'
import {CSSTransition, TransitionGroup} from 'react-transition-group';
class App extends Component {
constructor(props) {
super(props)
this.state = {
show: true,
list: []
}
this.toggle = this.toggle.bind(this)
}
render() {
return (
<Fragment>
<TransitionGroup>
{
this.state.list.map((item, index) => {
return (
<CSSTransition
timeout={1000}
classNames='fade'
unmountOnExit
appear={true}
key={index}>
<div>{index} - {item}</div>
</CSSTransition>
)
})
}
</TransitionGroup>
<button onClick={this.toggle}>append</button>
</Fragment>
)
}
toggle() {
this.setState((prevState) => {
return {
list: [...prevState.list, 'item']
}
})
}
}
export default App