快捷導航

react使用CSS實現(xiàn)react動畫功能示例

更新時間：2020年05月18日 09:09:04 作者：人生如初見_張默

這篇文章主要介紹了react使用CSS實現(xiàn)react動畫功能,結(jié)合實例形式分析了react使用CSS實現(xiàn)react動畫功能具體步驟與實現(xiàn)方法,需要的朋友可以參考下

本文實例講述了react使用CSS實現(xiàn)react動畫功能。分享給大家供大家參考，具體如下：

react動畫：

import React, { Component } from 'react';
 
class Boss extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShow:true
    }
    this.toTogger=this.toTogger.bind(this)
  }
  render() { 
    return ( 
      <div>
        <div className={this.state.isShow?'show':'hide'}>大BOSS--孫悟空</div>
        <div><button onClick={this.toTogger}>召喚</button></div>
      </div>
    );
  }
 
  toTogger() {
    this.setState({
      isShow:this.state.isShow?false:true
    })
  }
}
 
export default Boss;

css:

.hide{opacity: 1;transition: all 1.5s ease-in;}
.show{opacity: 0;transition: all 1.5s ease-in;}

keyframes動畫：

.hide{animation: hide-item 2s ease-in forwards;}
.show{animation: show-item 2s ease-in forwards;}
 
@keyframes hide-item{
  0%{
    opacity: 0;
    color: red;
  }
 
  50%{
    opacity: 0.5;
    color: saddlebrown;
  }
 
  100%{
    opacity: 1;
    color: yellow;
  }
}
 
@keyframes show-item{
  0%{
    opacity: 1;
    color:green;
  }
 
  50%{
    opacity: 0.5;
    color:greenyellow;
  }
 
  100%{
    opacity: 0;
    color: yellow;
  }
}

react-transition-group動畫庫：

import {CSSTransition} from 'react-transition-group';  
 
render() { 
    return ( 
      <div>
        <CSSTransition
          in={this.state.isShow}
          timeout={2000}
          classNames="boss-text"
          unmountOnExit
        >
        {/* <div className={this.state.isShow?'show':'hide'}>大BOSS--孫悟空</div> */}
        <div>大BOSS--孫悟空</div>
        </CSSTransition>
    <div><button onClick={this.toTogger}>{this.state.btn}</button></div>
      </div>
    );
  }

.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動畫：

import React, { Component, Fragment } from 'react';
import List from './List.js';
import axios from 'axios';
import Boss from './Boss';
import {CSSTransition,TransitionGroup} from 'react-transition-group'
 
class Test extends Component {
  constructor(props) {
    super(props);
    this.state={
      inputValue:'aaa',
      list:[],
    }
    // this.add=this.add.bind(this);
  }
 
  addList() {
    this.setState({
      list:[...this.state.list,this.state.inputValue],
      inputValue:''
    })
  }
 
  change(e) {
    this.setState({
      // inputValue:e.target.value
      inputValue:this.input.value
    })
  }
 
  delete(i) {
    // console.log(i);
    const list = this.state.list;
    list.splice(i,1);
    this.setState({
      list:list
    })
  }
 
  componentDidMount() {
    // console.log('componentDidMount');
    axios.get('https://www.easy-mock.com/mock/5e1d3d1564a3c20d7f366f91/ReactDemo1/App')
    .then((res)=>{
      console.log('獲取數(shù)據(jù)'+JSON.stringify(res));
      this.setState({
        list:res.data.data
      });
    })
    .catch((error)=>{console.log('獲取數(shù)據(jù)失敗'+error)});
  }
 
  render() { 
    console.log('3-render');
    return (
      <Fragment>
      <div>
        <input ref={(input)=>{this.input=input}} value={this.state.inputValue} onChange={this.change.bind(this)}/>
        <button onClick={this.addList.bind(this)}>添加</button>
      </div>
      <ul>
        <TransitionGroup>
          {
            this.state.list.map((v,i)=>{
              return(
                <CSSTransition
                  timeout={2000}
                  classNames='boss-text'
                  unmountOnExit
                  key={i}
                >
                  <List key={i} content={v} index={i} delete={this.delete.bind(this)} />
                </CSSTransition>
              );
            })
          }
        </TransitionGroup>
      </ul>
      <Boss/>
      </Fragment>
    );
  }
}
 
export default Test;

希望本文所述對大家react程序設(shè)計有所幫助。

您可能感興趣的文章: