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学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
jquery实现网页查找功能示例分享
Feb 12 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 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读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
浅析JavaScript事件和方法
2015/02/28 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
12条写出高质量JS代码的方法
2018/01/07 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
Python微信库:itchat的用法详解
2017/08/14 Python
详解用python实现简单的遗传算法
2018/01/02 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
Python实现分段线性插值
2018/12/17 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
python中的列表和元组区别分析
2020/12/30 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
生产内勤岗位职责
2013/12/07 职场文书
医德医风演讲稿
2014/05/20 职场文书
律师授权委托书范本
2014/10/07 职场文书
2014年实验室工作总结
2014/12/03 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
生产实习心得体会范文
2016/01/22 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android
python解析照片拍摄时间进行图片整理
2022/07/23 Python