React动画通常有三种方法实现从易到难为:

1、transition(CSS3自带)

2、animation(CSS3自带)

3、react-transition-group动画库(需要引入插件)

一、transition(CSS3自带)

1、用法示例:

.hide{
/*过渡动画效果*/
 opacity: 1;
transition: all 1s ease-in;
}

 含义:透明度在1s内从0渐变为1

2、transition其他参数

建议参考(http://www.runoob.com/cssref/css3-pr-transition.html)详细学习

transition-property 指定CSS属性的name,transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候

3、区别transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。所以,transform属性只对元素进行变换,不会产生过渡效果。

建议参考(http://www.runoob.com/cssref/css3-pr-transform.html)详细学习

 

二、animation(CSS3自带)

1、用法示例:

.hide{
/*过渡动画效果*/
animation: animation-name 2s ease-in forwards;
}
@keyframes animation-name {
0% {
opacity: 1;
color: red;
}
50% {
opacity: 0.5;
color: blue;
}
100%{
opacity: 0;
color: yellow;
}
}

 animation相对于transition的好处是可以一帧一帧的控制动画,自由度更高。

三、react-transition-group动画库(需要引入插件)

1、为什么要用react-transition-group?

因为有一些动画用animation和transition很难实现甚至不能实现,这时react-transition-group就非常必要啦

2、安装react-transition-group库

yarn add react-transition-group

3、官方文档地址:http://reactcommunity.org/react-transition-group/(强烈建议一定要先打开这个文档再继续向下阅读哦)

react-transition-group库有三个可使用的组件:

(1)主要使用CSSTransition(单标签的动画)和TransitionGroup(多标签的动画)

(2)Transition是更接近底层的动画,当时用CSSTransition和TransitionGroup都不能实现需要的动画时可以考虑使用Transition

4、React使用示例:(核心部分均标蓝)

js部分:

import React,{ Component , Fragment} from 'react';
// 引入react-transition-group动画组件
import { CSSTransition,TransitionGroup } from 'react-transition-group';
class AppTra extends Component{
constructor(props){
super(props);
this.state = {
list:[]
};
this.handleAddItem = this.handleAddItem.bind(this);
} handleAddItem(){
this.setState((prevState)=>{
return{
list: [...prevState.list,'666']
}
})
} render(){
return (
// Fragment是占位符
<Fragment>
<TransitionGroup>
{ this.state.list.map((item,index)=>{
return(
<CSSTransition
in={this.state.show}
//动画时间
timeout={1000}
// 前缀名注意S
classNames='fade'
unmountOnExit
onEntered={(el)=>{
el.style.color='blue'
}}
// 入场第一帧
appear={true} key={index}
>
<div>{item}</div>
</CSSTransition>
)
})
}
<button onClick={this.handleAddItem}>toggle</button>
</TransitionGroup>
</Fragment>
)
}
} // 导出组件
export default AppTra

  css部分:

/*入场动画*/
.fade-enter, .fade-appear{
/*入场动画执行的第一个时刻*/
opacity: 0;
} .fade-enter-active, .fade-appear-active{
/*入场动画执行的第二个瞬间一直到执行完成的时刻*/
opacity: 1;
transition: opacity 1s ease-in;
} .fade-enter-done{
/*入场动画执行完成之后*/
opacity: 1;
color: red;
} /*出场动画*/
.fade-exit{
opacity: 1;
} .fade-exit-active{
opacity: 0;
transition: opacity 1s ease-in;
} .fade-exit-done{
opacity: 0;
}

 大家动手试试吧

【React自制全家桶】八、React动画以及react-transition-group动画库的使用的更多相关文章

  1. 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

    前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...

  2. 【React自制全家桶】二、分析React的虚拟DOM和Diff算法

    一.React如何更新DOM内容: 1.  获取state 数据 2.  获取JSX模版 3.  通过数据 +模版结合,生成真实的DOM, 来显示,以下行代码为例(简称代码1) <div id= ...

  3. 【React自制全家桶】六、React性能优化(持续更新总结)

    一.通过虚拟DOM来提升性能(自动) 底层讲解见[React自制全家桶]二.分析React的虚拟DOM和Diff算法   二.将多次setState合并为一次执行(自动) 底层讲解见[React自制全 ...

  4. 【React自制全家桶】九、Redux入手

    一.React项目中为什么要用Redux 上图: 左图当使用纯React开发稍微大点的项目,因为React数据是瀑布式的,只能通过父子组件传递数据,所以实现关系不大的两React的组件之间的数据传递就 ...

  5. 【React自制全家桶】七、React实现ajax请求以及本地数据mock

    一.下载axios插件 yarn add axios 二.React的ajax请求代码如何放置 建议放置在生命周期函数之componentDidMount()中 三.ajax之get请求 axios. ...

  6. 【React自制全家桶】五、React组件的生命周期函数详解

    一.总览React组件的生命周期函数 什么是生命周期函数:简单的来说就是 在某个时刻会自动执行的函数 二.React的生命周期函数主要由四块组成 分别是:组件初始化.组件挂载.组件更新.组件卸载 三. ...

  7. 【React自制全家桶】四、React中state与props的分析与比较

    一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...

  8. 【React自制全家桶】三、React使用ref操作DOM与setState遇到的问题

    在React中同时使用ref操作DOM与setState常常会遇到 比如操作的DOM是setState更新之前的DOM内容,与想要的操作不一致.导致这样的原因是setState函数是异步函数. 就是当 ...

  9. Vue学习笔记【19】——Vue中的动画(使用第三方 CSS 动画库)

    导入动画类库:  <link rel="stylesheet" type="text/css" href="./lib/animate.css& ...

随机推荐

  1. python中的__init_subclass__是什么?

    什么是__init_subclass__ class Hook: def __init_subclass__(cls, **kwargs): print("__init_subclass__ ...

  2. 03:Java基础语法(二)

    Java基础语法 Java运算符 算术运算符 运算符是一种特殊的符号,用以表示数据的运算.赋值和比较等.1.操作数:参与运算的数据 称为操作数.2.表达式:运算符和操作数的整体 称为表达式.单独的一个 ...

  3. DA_06_高级文本处理命令

    Linux中没有盘符这个概念,只有一个根目录“/”,所有文件都在它下面:点击计算机,下面存放的都是根目录下的东西: 2.6 文本文件编辑命令 1.cat 命令用于查看纯文本文件(内容较少的:一次性全部 ...

  4. MySQL查询数据库中所有数据表的数据条数

    select table_name,table_rows from information_schema.tables where TABLE_SCHEMA = '数据库名称' order by ta ...

  5. angular 中同级元素交替样式

    事件 : ng-click="addNews()"  所属div的层级:    div > div  >span 即,对于 event.target 查找的话最多 从s ...

  6. 23_2spring的常用注解

    1.基于注解的IOC配置 1.1导入jar包 <?xml version="1.0" encoding="UTF-8"?> <project ...

  7. zencart重置用户登录密码sql

    zencart重置用户ID为99的登录密码为aaaaaaa ;

  8. 将 对象序列化与反序化 (json格式)

    实体类 package com.nf.redisDemo1.entity; public class News { private long id; private String title; pri ...

  9. NOIP 模拟赛 那些年,我们学过的文化课 --致已退役的fqk神犇.

    /* 这大概是我第一次整理模拟赛吧. 唉. T2打了很长时间. 一开始读错题了中间都能缩合了. 真心对不起生物老师hhh. 这种状态判重的题目还是做的太少! */ 背单词 [题目描述] fqk 退役后 ...

  10. java中jsp的EL的定义以及使用

    1.定义: EL(Expression Language) 是为了使JSP写起来更加简单.表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言,它提供了在 JSP 中简化表达式的方 ...