当前位置： 移动技术网 > IT编程>开发语言>JavaScript > react使用CSS实现react动画功能示例

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

2020年06月14日  | 移动技术网IT编程  | 我要评论

葫芦娃勇闯冒险岛,关于元宵节的作文,thegoldenage

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网