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 相关文章推荐
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
实例详解Node.js 函数
Jun 10 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
解决vuex刷新数据消失问题
Nov 12 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
PHP开发文件系统实例讲解
2006/10/09 PHP
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
django框架模板语言使用方法详解
2019/07/18 Python
Python json读写方式和字典相互转化
2020/04/18 Python
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
大学生标准推荐信范文
2013/11/25 职场文书
暑期研修感言
2014/02/17 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
爱心捐助倡议书
2014/05/19 职场文书
医院合作协议书
2014/08/19 职场文书
校园广播稿精选
2014/10/01 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android