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 过渡动画 ...
随机推荐
- Sentry 开发者贡献指南 - SDK 开发(事件负载)
内容整理自官方开发文档 系列 Docker Compose 部署与故障排除详解 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentr ...
- spring事务失效的12种场景
一 事务不生效 1.访问权限问题 java的访问权限主要有四种:private<default<protected<public. 把有某些事务方法,定义了错误的访问权限,就会导致事 ...
- Java+Eclipse+MySQL+Swing实现学生会考成绩管理系统(免费完整项目)
版权声明:原创不易,本文禁止抄袭.转载,侵权必究! 目录 一.需求开发文档 二.数据库设计文档 三.功能模块部分代码及效果展示 四.完整源码下载 五.作者Info 一.需求开发文档 项目完整文件列表: ...
- 使用 JavaScript 根据消费金额和消费者是否为会员确定折扣,最终核算实际应该支付的金额
查看本章节 查看作业目录 需求说明: 根据消费金额和消费者是否为会员确定折扣,最终核算实际应该支付的金额 消费金额在 200 元以上的会员折扣是 7.5 折,消费金额没有达到 200 元的会员折扣是 ...
- 编写Java程序,定义一个类似于ArrayList集合类
返回本章节 返回作业目录 需求说明: 设计一个类似于ArrayList的集合类ListArray. ListArray类模拟实现动态数组,在该类定义一个方法用于实现元素的添加功能,以及用于获取List ...
- redis-ha手动切换slave节点为master
仅做个人记录,请慎重参考!! 问题描述:使用redis-ha启动了3个pod,现在还有一个pod正常运行,并且为slave(理论上第一个起来的pod应该为master) 通过info命令查看下图 尝试 ...
- Flask_安装和配置(一)
安装Flask pip install flask 一 .创建Flask项目 Flask与Django相比,没有提供任何自动创建项目的操作,所以需要手动创建项目及启动项目的管理文件 例如,创建项目目录 ...
- 第10组 Beta冲刺 (1/5)
1.1基本情况 ·队名:今晚不睡觉 ·组长博客:https://www.cnblogs.com/cpandbb/p/14012521.html ·作业博客:https://edu.cnblogs.co ...
- Underscore.js 1.3.3 源码分析收藏
Underscore是一个提供许多函数编程功能的库,里面包含了你期待(在Prototype.js和Ruby中)的许多功能.但是没有扩展任何内置的Javascript对象,也就是说它没有扩展任何内置对象 ...
- 【原创】美团二面:聊聊你对 Kafka Consumer 的架构设计
在上一篇中我们详细聊了关于 Kafka Producer 内部的底层原理设计思想和细节, 本篇我们主要来聊聊 Kafka Consumer 即消费者的内部底层原理设计思想. 1.Consumer之总体 ...