一. 過渡動畫
# 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