React动画组件——React-Transitio-group动画实现
React动画组件——React-Transitio-group动画实现
安装
项目目录下使用命令行
yarn add react-transition-group
安装组件。在需要使用动画的页面加入以下代码
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./style.css";
App.js部分
/*
* @Author: YooHoeh
* @Date: 2018-07-14 17:50:52
* @Last Modified by: YooHoeh
* @Last Modified time: 2018-07-15 10:03:58
* @Description:
*/
import React, { Component, Fragment } from "react";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./style.css";
class App extends Component {
constructor(props) {
super(props);
this.state = {
list: []
};
this.handleAddItem = this.handleAddItem.bind(this);
}
render() {
return (
<Fragment>
<button onClick={this.handleAddItem}>Toggle</button>
<TransitionGroup>
{this.state.list.map((item, index) => {
return (
<CSSTransition
//将要显示动画的组件外面套上CSSTransition标签
timeout={1000}
classNames="fade" //对应CSS里面的'fade-'前缀,可以换成别的,对应的CSS前缀也要换
unmountOnExit //添加这个属性之后当组件消失时将移除组件的DOM
onEntered={el => {
//这个属性可以给动画播放完毕后的组件执行一次js函数
el.style.color = "blue";
}}
appear={true} //添加这个属性使组件第一次出现的时候(即页面刚加载时)也使用动画,对应css中的fade-appear和fade-appear-active样式
key={index}
>
<div>{item}</div>
</CSSTransition>
);
})}
</TransitionGroup>
</Fragment>
);
}
handleAddItem() {
this.setState(prevState => {
return {
list: [...prevState.list, "item"]
};
});
}
}
export default App;
CSS部分
.fade-enter,
.fade-appear {
opacity: 0;
}
.fade-enter-active,
.fade-apper-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-Transitio-group动画实现的更多相关文章
- React 克隆组件 -- React.cloneElement(可以用来修改子组件属性值,复制子组件,添加子组件)
项目要求实现按钮级权限,简单来说就是需要通过后台数据绑定来控制前端页面哪些操作按钮需要渲染,哪些操作按钮不需要渲染, 大体的方案是: 在原有的按钮标签外再套一层按钮权限控制标签,然后每个具体的按钮对照 ...
- 基于 React 实现一个 Transition 过渡动画组件
过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...
- 爆炸销毁动画组件Explosions
爆炸销毁动画组件Explosions 爆炸销毁动画通常应用于界面元素的移除.使用该动画效果可以将移除操作表现的更为直观生动.Explosions组件是一款专门实现爆炸销动画效果的组件,它可以展示界 ...
- 【Flutter 实战】一文学会20多个动画组件
老孟导读:此篇文章是 Flutter 动画系列文章第三篇,后续还有动画序列.过度动画.转场动画.自定义动画等. Flutter 系统提供了20多个动画组件,只要你把前面[动画核心](文末有链接)的文章 ...
- React Native填坑之旅--动画
动画是提高用户体验不可缺少的一个元素.恰如其分的动画可以让用户更明确的感知当前的操作是什么. 无疑在使用React Native开发应用的时候也需要动画.这就需要知道RN都给我们提供了那些动画,和每个 ...
- React Native组件之ScrollView 和 StatusBar和TabBarIos
React Native中的组件ScrollView类似于iOS中的UIScrollView,其基本的使用方法和熟悉如下: /** * Sample React Native App * https: ...
- beeshell —— 开源的 React Native 组件库
介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
- React Native组件(二)View组件解析
相关文章 React Native探索系列 React Native组件系列 前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件.View组件是最基本的组件,也是首先要掌握的组件,这一 ...
- 实现一个带有动效的 React 弹窗组件
我们在写一些 UI 组件时,若不考虑动效,就很容易实现,主要就是有无的切换(类似于 Vue 中的 v-if 属性)或者可见性的切换(类似于 Vue 中的 v-show 属性). 1. 没有动效的弹窗 ...
随机推荐
- install memcached for ubuntu
Memcached安装 1.先下载安装libevent 安装 libevent# tar zxvf libevent-1.4.9-stable.tar.gz# cd libevent-1.4.9-st ...
- ES优化总结
ES优化总结(特别是在bulk大量数据到ES的时候) https://blog.csdn.net/chenxun_2010/article/details/78602795 将 ELASTICSEAR ...
- MySql中 delimiter 详解
转载于:http://blog.csdn.net/yuxin6866/article/details/52722913 其实就是告诉MySQL解释器,该段命令是否已经结束了,mysql是否可以执行了. ...
- SqlServer2012清除日志文件
SqlServer在使用中会产生大量的日志文件,当不需要的时候可以进行删除. 删除方式: 右键数据库-->任务-->收缩-->文件 进入收缩文件页面,按照如下配置就可以了 有时候收缩 ...
- Go语言之defer关键字
类似于java中的finally, 在函数返回来执行, 它用来保证函数一定会作一些事情. package main import "fmt" func main() { defer ...
- docker挂载点泄露问题
本来以为我不会遇到. 结果还是遇到了. 现象为k8s delete pod时,系统一直显示Terminatiing,无论多久都不能正常. 以下两个帖子大概说明了是怎么回事. https://blog. ...
- error: not found: value sqlContext/import sqlContext.implicits._/error: not found: value sqlContext /import sqlContext.sql/Caused by: java.net.ConnectException: Connection refused
1.今天启动启动spark的spark-shell命令的时候报下面的错误,百度了很多,也没解决问题,最后想着是不是没有启动hadoop集群的问题 ,可是之前启动spark-shell命令是不用启动ha ...
- mysql四大特性与四种隔离级别
四大特性 1:原子性.事务是一个不可分割的整体,事务开始的操作,要么全部执行,要么全部不执行. 2:隔离性.同一时间,只允许一个事务请求同一组数据.不同的事务彼此之间没有干扰. 3:一致性.事务开始前 ...
- github的pull request是指什么意思
有一个仓库,叫Repo A.你如果要往里贡献代码,首先要Fork这个Repo,于是在你的Github账号下有了一个Repo A2,.然后你在这个A2下工作,Commit,push等.然后你希望原始仓库 ...
- shell判断文件是否为空
[[ `cat a.log |wc -l` -eq 0 ]] && echo "file is empty"