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 相关文章推荐
一个XML格式数据转换为图表的例子
Feb 09 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
JS二维数组的定义说明
Mar 03 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
PHP 判断变量类型实现代码
2009/10/23 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
python 如何区分return和yield
2020/09/22 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
柏林通行证:Berlin Pass
2018/04/11 全球购物
幼儿园教师教学反思
2014/02/06 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
整改落实自查报告
2014/11/05 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
琅琊山导游词
2015/02/05 职场文书
保送生自荐信
2015/03/06 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
大学推普周活动总结
2015/05/07 职场文书
56句经典英文座右铭
2019/08/09 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL