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 相关文章推荐
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
详解Vue的异步更新实现原理
Dec 22 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
MYSQL环境变量设置方法
2007/01/15 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
layui select动态添加option的实例
2018/03/07 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
python邮件发送smtplib使用详解
2020/06/16 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
英国电气世界:Electrical World
2019/09/08 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
班长演讲稿范文
2014/04/24 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
学习十八大演讲稿
2014/09/15 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS