实现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. Spring Boot 使用 Filter

    Filter 是 JavaEE 中 Servlet 规范的一个组件,位于包javax.servlet 中,它可以在 HTTP 请求到达 Servlet 之前,被一个或多个Filter处理. 1. 编写 ...

  2. 第八个知识点:交互式的定义如何帮助计算和IP类问题是什么

    第八个知识点:交互式的定义如何帮助计算和IP类问题是什么 这是系列中的第8篇,我们主要讨论计算中交互作用的用处和IP类问题是什么. 为了回答这些问题,我们首先给交互式证明系统一个简洁的介绍.众所周知, ...

  3. Chapter 1 A Definition of Causal Effect

    目录 1.1 Individual casual effects 1.2 Average casual effects 1.5 Causation versus association Hern\(\ ...

  4. Defending Adversarial Attacks by Correcting logits

    目录 概 主要内容 实验 Li Y., Xie L., Zhang Y., Zhang R., Wang Y., Tian Q., Defending Adversarial Attacks by C ...

  5. Going Deeper with Convolutions (GoogLeNet)

    目录 代码 Szegedy C, Liu W, Jia Y, et al. Going deeper with convolutions[C]. computer vision and pattern ...

  6. Drools集成SpringBoot

    1.说明 为了更好的在项目中使用Drools, 需要把Drools集成到Spring Boot, 下面介绍集成的方法, 并且开发简单的Demo和测试用例. 2.创建Maven工程 pom.xml工程信 ...

  7. Hbase集群安装Version1.1.5

    Hbase集群安装,基于版本1.1.5, 使用hbase-1.1.5.tar.gz安装包. 1.安装说明 使用外部Zookeeper集群而非Hbase自带zookeeper, 使用Hadoop文件系统 ...

  8. 线性基(Linear Basis)学习笔记

    前言 我看网络上没有什么非常系统的教学,可能是我太菜了吧,现在才学,做个记录给自己看. 简略介绍 一个数集能两两异或,能表出许多新的数. 线性基是一个集合,能够在记录最少的数的基础上,表示出一个等价的 ...

  9. Swoole 中协程的使用注意事项及协程中的异常捕获

    协程使用注意事项 协程内部禁止使用全局变量,以免发生数据错乱: 协程使用 use 关键字引入外部变量到当前作用域禁止使用引用,以免发生数据错乱: 不能使用类静态变量 Class::$array / 全 ...

  10. mybatis学习笔记(四)

    resultType 语句返回值类型的完整类名或别名 resultType 返回的是一个map集合,key是列名,value是对应的值 使用resultMap实现联表查询 resultMap 查询的结 ...