实现React Transition Css动画效果 首先在项目工程中引入react-transition-group:

npm install react-transition-group --save-dev

然后在组件中引入CSSTransition:

//示例也讲解TransitionGroup ,在这里一并引入
import { CSSTransition, TransitionGroup } from 'react-transition-group';

一下是演示组件代码:

import React, { Component } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { Button } from 'antd';
import '../componentStyle/CssTransition.css'; // css动画,可以根据className的变化来实现动画效果; class CssTransition extends Component {
constructor(props) {
super(props);
this.state = {
show: true,
list:[]
}
} //执行动画
handleToggole = () => {
// this.setState((prevState)=>{
// return{
// list: [...prevState.list, 'item']
// }
// })
this.setState({
show: !this.state.show
})
} handleAddItem=()=>{
this.setState((prevState) => {
console.log(prevState);
return {
list: [...prevState.list, 'item']
}
})
} render() {
return (
<div>
{/* 一个动画 */}
<CSSTransition
in={this.state.show} //控制动画是否入场,boolean值为true时,动画进场,boolean为false时动画出场
timeout={1000} //动画执行时间
classNames="fade" //自定义的类名(定义动画效果,进场前,进场后直到结束,结束前,结束后)
unmountOnExit //可选属性,当动画出场后,在页面上移除包裹的节点
onEnter={(el) => {
el.style.color = 'blue' //可选属性,动画进场后的回调,el指被包裹的dom
}}
onExited={() => {
//出场后的回调,可以在吃操作setSate操作
}}
>
<div>玩转React Transition</div>
</CSSTransition>
<Button type="primary" onClick={this.handleToggole}>Animation</Button> {/* 一组动画 */}
<TransitionGroup>
{
this.state.list.map((item, index) => {
return (
<CSSTransition
timeout={1000}
classNames='fade'
unmountOnExit
onEntered={(el) => { el.style.color = 'blue' }}
appear={true}
key={index}
>
<div>{item}</div>
</CSSTransition>
)
})
}
</TransitionGroup>
<Button onClick={this.handleAddItem}>AddItem</Button>
</div>
)
}
}
export default CssTransition;

到这里,还要配置一下执行动画效果的css文件

/* enter是入场前的刹那(点击按钮),appear指页面第一次加载前的一刹那(自动) */
.fade-enter, .fade-appear {
opacity: 0;
}
/* //enter-active指入场后到入场结束的过程,appear-active则是页面第一次加载自动执行 */
.fade-enter-active, .fade-appear-active {
opacity: 1;
transition: opacity 1s ease-in;
}
/* //入场动画执行完毕后,保持状态 */
.fade-enter-done {
opacity: 1;
}
/* //同理,出场前的一刹那,以下就不详细解释了,一样的道理 */
.fade-exit {
opacity: 1;
} .fade-exit-active {
opacity: 0;
transition: opacity 1s ease-in;
} .fade-exit-done {
opacity: 0;
}

到这里,就实现了一个动画的显示和隐藏功能,以及增加节点的动画效果演示了,这里是个人笔记,也希望对你有一定的帮助,下篇再见!

React Transition css动画案例解析的更多相关文章

  1. 前端深入之css篇丨2020年前,彻底掌握css动画【transition】

    写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...

  2. 基于 React 实现一个 Transition 过渡动画组件

    过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...

  3. CSS动画transform、transition和animation的区别

    CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation. 1.transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotat ...

  4. CSS动画详解及transform、transition、translate的区别

    刚看完一节慕课网的css动画,在此总结下 1. 先说下 transform.transition.translate的区别 transform 和 transition是css的2个属性,transl ...

  5. css3-12 transition+css或transform实现过渡动画

    css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...

  6. CSS过渡效果transition和动画

    一.过渡效果 可以在不适用Flash和js 的情况下实现过渡效果 属性 描述 transition 简写属性,用于在一个属性中设置四个过渡属性 transition-property 规定应用过渡的c ...

  7. css动画(transition/transform/animation)

    在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

  8. CSS动画-transition/animation

    HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...

  9. CSS 动画一站式指南

    CSS 动画一站式指南 目录 CSS 动画一站式指南 1. CSS 动画 1.1 变换 1.1.1 变换属性介绍 1.1.2 变换动画实践 1.2 过渡 1.2.1 过渡属性介绍 1.2.2 过渡动画 ...

随机推荐

  1. Chapter 3 Observational Studies

    目录 概 3.1 3.2 Exchangeability 3.3 Positivity 3.4 Consistency First Second Fine Point 3.1 Identifiabil ...

  2. [opencv]调用鼠标事件执行grabcut算法实现阈值分割

    #include<iostream> #include <opencv2/opencv.hpp> #include <math.h> using namespace ...

  3. OSI七层模型(Open System Interconnection)

    应用层 网络服务与最终用户的一个接口. 协议有:HTTP FTP TFTP SMTP SNMP DNS TELNET HTTPS POP3 DHCP 表示层 数据的表示.安全.压缩.(在五层模型里面已 ...

  4. Mysql 设计超市经营管理系统,包括商品信息表(goods) 和 商品类型表(goodstype)

    互联网技术学院周测机试题(一) 一  需求分析 为进一步完善连锁超市经营管理,提高管理效率,减少管理成本,决定开发一套商品管理系统,用于日常的管理.本系统分为商品管理.员工管理.店铺管理,库存管理等功 ...

  5. Oracle对表空间、用户、用户权限的操作

    一.对表空间的操作 1.创建表空间(create tablespace) -- 'hpdb_tablespace' 指定表空间名称 -- 'e:\hpdb.dbf' 指定表空间数据文件名称 -- si ...

  6. gRPC创建Java RPC服务

    1.说明 本文介绍使用gRPC创建Java版本的RPC服务, 包括通过.proto文件生成Java代码的方法, 以及服务端和客户端代码使用示例. 2.创建生成代码工程 创建Maven工程,grpc-c ...

  7. Linux下如何部署FTP服务器

    FTP 是 File Transfer Protocol 的缩写,即文件传输协议,它通过网络在服务器和客户端之间传输文件,现在已经成为一种广泛使用的标准工具 vsftpd 是 very secure ...

  8. html基础 表单相关属性综合实战案例 附有注释

    html结构代码: <form > <!-- form 为了让重置按钮生效--> <h1>青春不常在,抓紧谈恋爱</h1> <hr> 昵称: ...

  9. CF149D游戏

    题目描述 Petya遇到了一个关于括号序列的问题: 给定一个字符串S,它代表着正确的括号序列,即("(")与 (")")是匹配的.例如:"(())() ...

  10. Eclipse导包

    导包快捷键:"Ctrl+Shift+M",但是一般不用,一般利用整理包的快捷键. 整理包的快捷键:"Ctrl+Shift+O",与导包的区别在于,有用的留着,没 ...