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 相关文章推荐
FireFox与IE 下js兼容触发click事件的代码
Nov 20 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 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
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
两个强悍的php 图像处理类1
2009/06/15 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
Python类的继承用法示例
2019/01/31 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
军训 自我鉴定
2014/02/03 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python