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


Posted in Javascript onMay 18, 2020

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

Javascript 相关文章推荐
javascript vvorld 在线加密破解方法
Nov 13 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
tracking.js实现前端人脸识别功能
Apr 16 Javascript
vue常用高阶函数及综合实例
Feb 25 Vue.js
Node.js API详解之 net模块实例分析
May 18 #Javascript
Javascript实现简易天数计算器
May 18 #Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 #Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 #Javascript
关于AngularJS中几种Providers的区别总结
May 17 #Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 #Javascript
JavaScript链式调用原理与实现方法详解
May 16 #Javascript
You might like
杏林同学录(八)
2006/10/09 PHP
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
jquery禁用右键示例
2014/04/28 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
JS实现的缓冲运动效果示例
2018/04/30 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python的Urllib库的基本使用教程
2015/04/30 Python
python中循环语句while用法实例
2015/05/16 Python
python实现12306火车票查询器
2017/04/20 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
澳洲的服装老品牌:SABA
2018/02/06 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
技校个人求职信范文
2014/01/25 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
运动会方阵口号
2014/06/07 职场文书
购房委托书范本
2014/09/18 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
防暑降温通知书
2015/04/27 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
一级电子管军用接收机测评
2022/04/05 无线电
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS