一、安装
在终端输入
npm install react-transition-group --save
二、使用
react-transition-group插件包含三个库:Transition、CSSTransition以及TransitionGroup。
使用时需要引入动画库(引入需要使用的库即可):
import { Transition, CSSTransition, TransitionGroup } from 'react-transition-group';
CSSTransition使用案例:
新建Boss.js,内容如下
classNames="boss-text"表示引用以''boss-text''开头的CSS
unmountOnExit表示退出时删除组件
import React, { Component } from 'react';
import { CSSTransition } from 'react-transition-group';
class Boss extends Component {
constructor(props){
super(props);
this.state = {
isShow:true
}
this.toToggle = this.toToggle.bind(this)
}
render() {
return (
<div>
<CSSTransition
in={this.state.isShow}
timeout={2000}
classNames="boss-text"
unmountOnExit
>
<div>Boss级人物-孙悟空</div>
</CSSTransition>
<div>
<button onClick={this.toToggle}>
召唤Boss
</button>
</div>
</div>
);
}
toToggle(){
this.setState({
isShow:!this.state.isShow
})
}
}
export default Boss;
style.css
.input{
border:3px solid #ae7000
}
/*
xxx-enter //进入页面前
xxx-enter-active //进入页面时
xxx-enter-done //进入页面后
xxx-exit //退出页面前
xxx-exit-active //退出页面时
xxx-exit-done //退出页面完成后
*/
.boss-text-enter{
opacity: 0;
}
.boss-text-enter-active{
opacity: 1;
transition: opacity 2000ms;
}
.boss-text-enter-done{
opacity: 1;
}
.boss-text-exit{
opacity: 1;
}
.boss-text-exit-active{
opacity: 0;
transition: opacity 2000ms;
}
.boss-text-exit-done{
opacity: 0;
}
实现效果
多DOM动画案例:
引入CSSTransition和TransitionGroup。
Xiaojiejie.js
import React, { Component, Fragment } from 'react';
import axios from 'axios';
import './style.css';
import XiaojiejieItem from './XiaojiejieItem';
import Boss from './Boss';
import {CSSTransition,TransitionGroup} from 'react-transition-group';
class Xiaojiejie extends Component {
constructor(props) {
super(props);
this.state = {
inputValue: '', //输入值
list: [] //服务列表
}
}
componentDidMount(){
axios.get('/mock/5fa9f41e234c9b0d8babebae/ReactDemo01/xiaojiejie')
.then((res)=>{
console.log('axios获取数据成功'+JSON.stringify(res))
this.setState({
list:res.data.data
})
})
.catch((error)=>{
console.log('axios获取数据失败'+error)
})
}
render() {
// console.log("render---组件挂载中");
return (
<Fragment> {/*Fragment不显示 */}
<div>
<label htmlFor="serve">增加服务:</label>
<input
id="serve"
className="input"
value={this.state.inputValue}
onChange={this.inputChange.bind(this)}
ref={(input)=>{this.input=input}}
/>
<button onClick={this.addList.bind(this)}>增加服务</button>
</div>
<ul ref={(ul)=>{this.ul=ul}}>
<TransitionGroup>
{
this.state.list.map((item, index) => {
return (
<CSSTransition
timeout={2000}
classNames="boss-text"
unmountOnExit
appear={true}
key={index+item}
>
<XiaojiejieItem
key={index+item}
content={item}
index={index}
deleteItem={this.deleteItem.bind(this)}
/>
</CSSTransition>
)
})
}
</TransitionGroup>
</ul>
<Boss/>
</Fragment>
)
}
inputChange() {
this.setState({
inputValue: this.input.value
})
}
addList() {
this.setState({
list: [...this.state.list, this.state.inputValue],
//...表示扩展运算符
//相当于['基础按摩','精油推背',this.state.inputValue]
inputValue: ''
},()=>{
console.log(this.ul.querySelectorAll('li').length);
})
}
deleteItem(index) {
//不可以直接操作this.state.list,需要引入一个局部变量
let list = this.state.list;
list.splice(index, 1);
this.setState({
list: list
})
}
}
export default Xiaojiejie; //暴露Xiaojiejie组件,让外部能够进行引用
实现效果