欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react使用CSS实现react动画功能示例

程序员文章站 2022-06-25 08:01:53
本文实例讲述了react使用css实现react动画功能。分享给大家供大家参考,具体如下:react动画:import react, { component } from 'react'; class...

本文实例讲述了react使用css实现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('获取数据'+json.stringify(res));
      this.setstate({
        list:res.data.data
      });
    })
    .catch((error)=>{console.log('获取数据失败'+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程序设计有所帮助。