12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画
一. 过渡动画
# index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
ReactDOM.render(<App />, document.getElementById('root'));
# app.js
import React, { Component, Fragment } from 'react';
import './style.css';
class app extends Component{
constructor(props){
super(props);
this.state = {
show : true
};
this.DivToggle = this.DivToggle.bind(this);
}
DivToggle(){
console.log(this.state.show)
this.setState({
show: this.state.show ? false : true
})
}
render() {
return (
<Fragment>
<div className={this.state.show? 'show': 'hide'}>你好啊</div>
<button onClick={this.DivToggle}>toggle</button>
</Fragment>
)
}
}
export default app;
# style.css
.show{
opacity: 1;
transition: all 1s ease-in;
}
.hide{
opacity: 0;
transition: all 1s ease-in;
}
二.动画效果
使用 keyframes 进行渲染 动画
# style.css
.show{
/* 使用 forwards css 动画最后一帧 保存 样式*/
animation: show-item 2s ease-in forwards;
}
.hide{
/* 使用 forwards css 动画最后一帧 保存 样式*/
animation: hide-item 2s ease-in forwards;
}
@keyframes hide-item {
0% {
opacity: 1;
color: red;
}
50% {
opacity: 0.5;
color: green;
}
100% {
opacity: 0;
color: blue;
}
}
@keyframes show-item {
0% {
opacity: 0;
color: blue;
}
50% {
opacity: 0.5;
color: green;
}
100% {
opacity: 1;
color: red;
}
}
三. 使用 react-transition-group CSSTransition 实现动画 (github 地址) (文档)
1. 安装 react-transition-group
yarn add react-transition-group
2. 引入 css-transition
import { CSSTransition } fron 'react-transition-group'
3. 将要 改变样式的元素用 CSSTransition 标签包裹起来
eg:
# index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
ReactDOM.render(<App />, document.getElementById('root'));
# 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.DivToggle = this.DivToggle.bind(this);
}
DivToggle(){
console.log(this.state.show);
this.setState({
show: this.state.show? false : true
});
}
render(){
return (
<Fragment>
<CSSTransition
in={this.state.show}
timeout={1000}
classNames = "fade"
// 当隐藏后 去除挂载
unmountOnExit
// 当显示完成时 颜色变蓝 el 指 CSSTransition 内包裹的元素
onEntered={(el)=>{ el.style.color='red' }}
// 当退出显示时 颜色变黑 el 指 CSSTransition 内包裹的元素
onExited={(el)=>{ el.style.color='black' }}
// 第一次入场动画也要引入动画
appear={true}
>
<div className={this.state.show?'show':'hide'}>hello</div>
</CSSTransition>
<button type="button" onClick={this.DivToggle}>点一下</button>
</Fragment>
);
}
}
export default app;
#style.css
四. 使用react-transition-group CSSTransition TransitionGroup 实现多个元素样式动画
#index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
ReactDOM.render(<App />, document.getElementById('root'));
#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={
list : []
}
this.AddItem = this.AddItem.bind(this);
}
AddItem (){
this.setState((prevState)=>{
return {
list : [...prevState.list, 'item']
}
})
}
render(){
return (
<Fragment>
{/* TransitionGroup 包裹住要展示动画的元素 */}
<TransitionGroup>
{
this.state.list.map((val, index)=>{
return (
// 内部要展示样式的元素 使用 CSSTransition 包裹并边写动画效果
// 这时可以删除 in 效果 没有手动点击变换效果
<CSSTransition
timeout={1000}
classNames="fade"
onEntered={(el)=>{el.style.color="red"}}
appear={true}
key={index}
>
<div key={index} >{val}</div>
</CSSTransition>
)
})
}
</TransitionGroup>
<button type="button" onClick={this.AddItem}>点一下</button>
</Fragment>
);
}
}
export default app;
#style.css
