css动画的方式,比较局限,涉及到一些js动画的时候没法处理了。react-transition-group是react的第三方模块,借住这个模块可以更方便的实现更加复杂的动画效果
主要用里面的cssTransition

js

import React, { Component, Fragment } from 'react';
import { CSSTransition } from 'react-transition-group';
import './style.css' class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      show: true
    }
    this.handleToggle = this.handleToggle.bind(this);
  }   render() {
    return (
      <Fragment>
        <CSSTransition
          in={this.state.show}
          timeout={}
          classNames="fade"
          unmountOnExit
          appear={true}
        >
          <div>hello</div>
        </CSSTransition>
        <button onClick={this.handleToggle}>toggle</button>
      </Fragment>
    )
  }   handleToggle() {
    this.setState({
      show: this.state.show ? false : true
    })
  }
}
export default App;

css

/* 入场动画 fade-appear fade-appear-active 第一次才游泳*/
.fade-enter, .fade-appear{
  opacity:;
}
.fade-enter-active, .fade-appear-active{
  opacity:;
  transition: opacity 1s ease-in;
}
.fade-enter-done{
  opacity:;
} /* 出场动画 */
.fade-exit{
  opacity:;
}
.fade-exit-active{
  opacity:;
  transition: opacity 1s ease-in;
}
.fade-exit-done{
  opacity:;
}
咋一看,这个实现过程反而变得复杂了,并没有变得简单,虽然复杂了,但是带给了我们很多新的特性。
看官方网站,他接受一个unmountOnExit这样一个属性,发现dom也别移除了,这个功能之前是没法做到的,用这个库就显得非常简单。
 
再看,后面提供了很多的钩子函数,这就可以通过js额外的干一点事情,比如hello显示出来之后,希望他的颜色变成红色,
.fade-enter-done{
  opacity:;
  color: red;
}
这样就可以了。但是也可以用 js实现这个动画,在css属性上加上
onEntered={(el)=>{
  el.style.color='blue'
}}
这种语法在之前做动画的时候也是没法实现的
 
 
多个动画的js
import React, { Component, Fragment } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './style.css'
class App extends Component {
constructor(props){
super(props);
this.state = {
list: []
}
this.handleAddItem = this.handleAddItem.bind(this);
} render() {
return (
<Fragment>
<TransitionGroup>
{
this.state.list.map((item, index)=>{
return (
<CSSTransition
timeout={}
classNames="fade"
unmountOnExit
appear={true}
>
<div key={index}>{item}</div>
</CSSTransition>
)
})
}
</TransitionGroup>
<button onClick={this.handleAddItem}>toggle</button>
</Fragment>
)
} handleAddItem() {
this.setState((prevState) => {
return {
list: [...prevState.list, 'item']
}
})
}
}
export default App;

react中使用react-transition-group实现动画的更多相关文章

  1. react中为什么要使用immutable

    因为在react中,react的生命周期中的setState()之后的shouldComponentUpdate()阶段默认返回true,所以会造成本组件和子组件的多余的render,重新生成virt ...

  2. React 引入import React 原理

    本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖. 所以我们如果使用了JSX,我们其实就是在使用React,所以我们就 ...

  3. react中如何使用动画效果

    在react中想要加入动画效果 需要引入 import {CSSTransitionGroup} from 'react-transition-group' //加入react 动画包 import ...

  4. react中使用动画

    1. css原生动画的使用 import React, { useState } from "react" import "./index.css" funct ...

  5. React中使用CSSTransitionGroup插件实现轮播图

    动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...

  6. Three.js 快速上手以及在 React 中运用[转]

    https://juejin.im/post/5ca22692f265da30a53d6656 github 的地址 欢迎 star! 之前项目中用到了 3D 模型演示的问题,整理了一下之前学习总结以 ...

  7. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  8. react中的DOM操作

    前面的话 某些情况下需要在典型数据流外强制修改子代.要修改的子代可以是 React 组件实例,也可以是 DOM 元素.这时就要用到refs来操作DOM 使用场景 下面是几个适合使用 refs 的情况 ...

  9. react中input自动聚焦问题

    input自动聚焦问题 在react中可以使用refs解决这个问题,首先看一下refs的使用场景: (1)处理焦点.文本选择或媒体控制. (2)触发强制动画. (3)集成第三方 DOM 库. 使用re ...

  10. react中实现搜索结果中关键词高亮显示

    网上看到很多js实现的关键词高亮显示,方法都是一个道理,先获取要替换的文字区域,然后在用正则匹配到关键词,并进行替换. react中实现起来似乎更简单一些. 我这里的需求是通过搜索框搜索出新闻列表,在 ...

随机推荐

  1. method reference

    import java.util.Arrays; import java.util.List; import java.util.function.Function; import java.util ...

  2. HTML盒子尺寸的计算

    参考链接http://edu.51cto.com/lesson/id-54739.html

  3. 关于重定向printf出错 Error[Pe020]: identifier "FILE" is undefined 解决方案

    IAR或者Keil用到重定向printf函数出现的错误解决方案 转发请注明出处,谢谢 原创:李剀 https://www.cnblogs.com/kevin-nancy/articles/105851 ...

  4. Unity3D游戏轻量级xlua热修复框架

    Unity3D游戏轻量级xlua热修复框架   一 这是什么东西 前阵子刚刚集成xlua到项目,目的只有一个:对线上游戏C#逻辑有Bug的地方执行修复,通过考察xlua和tolua,最终选择了xlua ...

  5. 【IP】Linux中检测IP地址冲突

    在Windows系统中,如果本地网络IP地址出现冲突,会出现图标提示. 在Linux系统中,并没有提供相关的功能,如果本地网络采用静态IP地址配置,出现比较奇怪的网络连接问题,如ssh连接复位,可以考 ...

  6. 5、Angular2 Injectable 服务

    1.Injectable 

  7. CentOS安装nginx方法命令教程

    1.依赖项和必要组件 yum install -y make cmake gcc gcc-c++ yum install -y pcre pcre-devel yum install -y zlib ...

  8. C# 调用者信息获取

    做日志组件时,常常会记录调用者信息,通常都是通过反射来获取相应信息.不过.Net 4.5引入了三个新的特性,即CallerFilePathAttribute,CallerLineNumberAttri ...

  9. C# ADO.NET

    ADO.NET 作业总结难点 数据库语句掌握太差 //查询 select * from Users //查询表中所有数据 select * from Users where UserName = 'l ...

  10. python 爬虫初试

    python3.5  抓网易新闻的排行榜上的新闻,主要用自带的request模块和lxml import re from urllib import request from lxml import ...