react中使用css动画方式,但是在实际中使用这些开发的方式很少,主要是涉及到js动画,便没法处理了。这时,可以使用react-transition-group这个第三方模块来实现更加复杂的动画。
首先打开github,搜索react-transition-group,或者直接网址进入https://github.com/reactjs/react-transition-group
,之后进入主文档https://reactcommunity.org/react-transition-group/
,显示我们要先安装。可以采用以下两种安装
# npm
npm install react-transition-group --save
# yarn
yarn add react-transition-group
主要使用这里的css transition,但是当css transition解决不了问题的时候,我们就可以通过transition来解决问题
首先我们先去引用import { CSSTransition } from 'react-transition-group';
App.js
import React, { Component, Fragment } from 'react';
import { CSSTransition } from 'react-transition-group';
import './style.css'
class App 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={1000}
classNames='fade'
unmountOnExit
onEnter={(el)=>{el.style.color='blue'}}
appear={true}
>
<div>hello</div>
</CSSTransition>
<button onClick={this.handleToggle}>toggle</button>
</Fragment>
)
}
handleToggle(){
this.setState({
show:this.state.show ? false : true
})
}
}
export default App;
style.css
/* 当动画执行入场动画的时候,也就是show的值从false变为true的时候,
这时入场动画将会执行。
在入场动画执行的第一个时刻,CSSTransition这个组件会往div标签上挂载一个样式,
就是fade-enter */
/* 入场动画刚要执行的第一个瞬间,但还没有入场的时候 */
.fade-enter,.fade-appear{
opacity: 0;
}
/* 入场动画执行的第二个时刻,到入场动画执行完成之前的一个时刻 */
.fade-enter-active,.fade-appear-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;
}
仔细看,这个实现过程比之之前复杂了,但是却带给了我们很多新的特性。看我们这个官方文档的网址https://codesandbox.io/s/m77l2vp00x?from-embed。接收一个unmountOnExit这样一个属性,可以当点击按钮时,隐藏的时候将整个dom都给移除了,这个功能之前是没法做到的,用这个库就显得非常简单。
比如,hello显示出来之后,希望他的颜色变成红色,使用css
.fade-enter-done{
opacity: 1;
color: red;
}
这个第三方库提供了很多的钩子函数,所谓钩子函数就是例如生命周期函数,在某一时刻可以自动执行的函数。这就可以通过js额外的干一点事情,用 js实现这个动画
onEntered={(el)=>{
el.style.color=‘blue’
}}
这种语法在之前做动画的时候也是没法实现的
多个动画的js实现
外边总和用TransitionGroup ,里边单个动画用CSSTransition包裹
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={
list:[]
}
this.handleAddItem=this.handleAddItem.bind(this);
}
render() {
return (
<Fragment>
<TransitionGroup>
{
this.state.list.map((item,index)=>{
return (
<CSSTransition
timeout={1000}
classNames='fade'
unmountOnExit
onEnter={(el)=>{el.style.color='blue'}}
appear={true}
key={index}
>
<div key={index}>{item}</div>
</CSSTransition>
)
})
}
</TransitionGroup>
<button onClick={this.handleAddItem}>toggle</button>
</Fragment>
)
}
handleAddItem(){
this.setState((prevState)=>{
return {
list : [...prevState.list,'item']
}
})
}
}
export default App;