React Transition css动画案例解析
实现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动画案例解析的更多相关文章
- 前端深入之css篇丨2020年前,彻底掌握css动画【transition】
写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...
- 基于 React 实现一个 Transition 过渡动画组件
过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...
- CSS动画transform、transition和animation的区别
CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation. 1.transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotat ...
- CSS动画详解及transform、transition、translate的区别
刚看完一节慕课网的css动画,在此总结下 1. 先说下 transform.transition.translate的区别 transform 和 transition是css的2个属性,transl ...
- css3-12 transition+css或transform实现过渡动画
css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...
- CSS过渡效果transition和动画
一.过渡效果 可以在不适用Flash和js 的情况下实现过渡效果 属性 描述 transition 简写属性,用于在一个属性中设置四个过渡属性 transition-property 规定应用过渡的c ...
- css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
- CSS动画-transition/animation
HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...
- CSS 动画一站式指南
CSS 动画一站式指南 目录 CSS 动画一站式指南 1. CSS 动画 1.1 变换 1.1.1 变换属性介绍 1.1.2 变换动画实践 1.2 过渡 1.2.1 过渡属性介绍 1.2.2 过渡动画 ...
随机推荐
- Spring Boot 使用 Filter
Filter 是 JavaEE 中 Servlet 规范的一个组件,位于包javax.servlet 中,它可以在 HTTP 请求到达 Servlet 之前,被一个或多个Filter处理. 1. 编写 ...
- 第八个知识点:交互式的定义如何帮助计算和IP类问题是什么
第八个知识点:交互式的定义如何帮助计算和IP类问题是什么 这是系列中的第8篇,我们主要讨论计算中交互作用的用处和IP类问题是什么. 为了回答这些问题,我们首先给交互式证明系统一个简洁的介绍.众所周知, ...
- Chapter 1 A Definition of Causal Effect
目录 1.1 Individual casual effects 1.2 Average casual effects 1.5 Causation versus association Hern\(\ ...
- Defending Adversarial Attacks by Correcting logits
目录 概 主要内容 实验 Li Y., Xie L., Zhang Y., Zhang R., Wang Y., Tian Q., Defending Adversarial Attacks by C ...
- Going Deeper with Convolutions (GoogLeNet)
目录 代码 Szegedy C, Liu W, Jia Y, et al. Going deeper with convolutions[C]. computer vision and pattern ...
- Drools集成SpringBoot
1.说明 为了更好的在项目中使用Drools, 需要把Drools集成到Spring Boot, 下面介绍集成的方法, 并且开发简单的Demo和测试用例. 2.创建Maven工程 pom.xml工程信 ...
- Hbase集群安装Version1.1.5
Hbase集群安装,基于版本1.1.5, 使用hbase-1.1.5.tar.gz安装包. 1.安装说明 使用外部Zookeeper集群而非Hbase自带zookeeper, 使用Hadoop文件系统 ...
- 线性基(Linear Basis)学习笔记
前言 我看网络上没有什么非常系统的教学,可能是我太菜了吧,现在才学,做个记录给自己看. 简略介绍 一个数集能两两异或,能表出许多新的数. 线性基是一个集合,能够在记录最少的数的基础上,表示出一个等价的 ...
- Swoole 中协程的使用注意事项及协程中的异常捕获
协程使用注意事项 协程内部禁止使用全局变量,以免发生数据错乱: 协程使用 use 关键字引入外部变量到当前作用域禁止使用引用,以免发生数据错乱: 不能使用类静态变量 Class::$array / 全 ...
- mybatis学习笔记(四)
resultType 语句返回值类型的完整类名或别名 resultType 返回的是一个map集合,key是列名,value是对应的值 使用resultMap实现联表查询 resultMap 查询的结 ...