【React自制全家桶】八、React动画以及react-transition-group动画库的使用
React动画通常有三种方法实现从易到难为:
1、transition(CSS3自带)
2、animation(CSS3自带)
3、react-transition-group动画库(需要引入插件)
一、transition(CSS3自带)
1、用法示例:
.hide{
/*过渡动画效果*/
opacity: 1;
transition: all 1s ease-in;
}
含义:透明度在1s内从0渐变为1
2、transition其他参数
建议参考(http://www.runoob.com/cssref/css3-pr-transition.html)详细学习
transition-property | 指定CSS属性的name,transition效果 |
transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
transition-timing-function | 指定transition效果的转速曲线 |
transition-delay | 定义transition效果开始的时候 |
3、区别transform
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。所以,transform属性只对元素进行变换,不会产生过渡效果。
建议参考(http://www.runoob.com/cssref/css3-pr-transform.html)详细学习
二、animation(CSS3自带)
1、用法示例:
.hide{
/*过渡动画效果*/
animation: animation-name 2s ease-in forwards;
}
@keyframes animation-name {
0% {
opacity: 1;
color: red;
}
50% {
opacity: 0.5;
color: blue;
}
100%{
opacity: 0;
color: yellow;
}
}
animation相对于transition的好处是可以一帧一帧的控制动画,自由度更高。
三、react-transition-group动画库(需要引入插件)
1、为什么要用react-transition-group?
因为有一些动画用animation和transition很难实现甚至不能实现,这时react-transition-group就非常必要啦
2、安装react-transition-group库
yarn add react-transition-group
3、官方文档地址:http://reactcommunity.org/react-transition-group/(强烈建议一定要先打开这个文档再继续向下阅读哦)
react-transition-group库有三个可使用的组件:
(1)主要使用CSSTransition(单标签的动画)和TransitionGroup(多标签的动画)
(2)Transition是更接近底层的动画,当时用CSSTransition和TransitionGroup都不能实现需要的动画时可以考虑使用Transition
4、React使用示例:(核心部分均标蓝)
js部分:
import React,{ Component , Fragment} from 'react';
// 引入react-transition-group动画组件
import { CSSTransition,TransitionGroup } from 'react-transition-group';
class AppTra extends Component{
constructor(props){
super(props);
this.state = {
list:[]
};
this.handleAddItem = this.handleAddItem.bind(this);
} handleAddItem(){
this.setState((prevState)=>{
return{
list: [...prevState.list,'666']
}
})
} render(){
return (
// Fragment是占位符
<Fragment>
<TransitionGroup>
{ this.state.list.map((item,index)=>{
return(
<CSSTransition
in={this.state.show}
//动画时间
timeout={1000}
// 前缀名注意S
classNames='fade'
unmountOnExit
onEntered={(el)=>{
el.style.color='blue'
}}
// 入场第一帧
appear={true} key={index}
>
<div>{item}</div>
</CSSTransition>
)
})
}
<button onClick={this.handleAddItem}>toggle</button>
</TransitionGroup>
</Fragment>
)
}
} // 导出组件
export default AppTra
css部分:
/*入场动画*/
.fade-enter, .fade-appear{
/*入场动画执行的第一个时刻*/
opacity: 0;
} .fade-enter-active, .fade-appear-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动画以及react-transition-group动画库的使用的更多相关文章
- 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
- 【React自制全家桶】二、分析React的虚拟DOM和Diff算法
一.React如何更新DOM内容: 1. 获取state 数据 2. 获取JSX模版 3. 通过数据 +模版结合,生成真实的DOM, 来显示,以下行代码为例(简称代码1) <div id= ...
- 【React自制全家桶】六、React性能优化(持续更新总结)
一.通过虚拟DOM来提升性能(自动) 底层讲解见[React自制全家桶]二.分析React的虚拟DOM和Diff算法 二.将多次setState合并为一次执行(自动) 底层讲解见[React自制全 ...
- 【React自制全家桶】九、Redux入手
一.React项目中为什么要用Redux 上图: 左图当使用纯React开发稍微大点的项目,因为React数据是瀑布式的,只能通过父子组件传递数据,所以实现关系不大的两React的组件之间的数据传递就 ...
- 【React自制全家桶】七、React实现ajax请求以及本地数据mock
一.下载axios插件 yarn add axios 二.React的ajax请求代码如何放置 建议放置在生命周期函数之componentDidMount()中 三.ajax之get请求 axios. ...
- 【React自制全家桶】五、React组件的生命周期函数详解
一.总览React组件的生命周期函数 什么是生命周期函数:简单的来说就是 在某个时刻会自动执行的函数 二.React的生命周期函数主要由四块组成 分别是:组件初始化.组件挂载.组件更新.组件卸载 三. ...
- 【React自制全家桶】四、React中state与props的分析与比较
一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...
- 【React自制全家桶】三、React使用ref操作DOM与setState遇到的问题
在React中同时使用ref操作DOM与setState常常会遇到 比如操作的DOM是setState更新之前的DOM内容,与想要的操作不一致.导致这样的原因是setState函数是异步函数. 就是当 ...
- Vue学习笔记【19】——Vue中的动画(使用第三方 CSS 动画库)
导入动画类库: <link rel="stylesheet" type="text/css" href="./lib/animate.css& ...
随机推荐
- KMS激活的密钥
今天办公电脑黑屏了,仔细一看,变成了未激活.于是从网上找到了所有Windows版本的GVLK密钥,试了一下完美激活,应该是180天的吧.先用着,等下次过期了再说,哈哈. GVLK密钥是专门用于KMS激 ...
- 超简单!教你如何修改源列表(sources.list)来提高软件访问速度
因为Ubuntu官方的源地址不在国内,所以在国内的访问速度非常慢,比如:我们要下载或是更新软件那速度比蜗牛还慢.所以,我们需要改成国内的镜像服务器,这样,我们在下载或更新软件的时候就会很快了. 配置步 ...
- POI读取Excel如何判断行为空
public static boolean isRowEmpty(Row row) { for (int c = row.getFirstCellNum(); c < row.getLastCe ...
- .md(markdown)基础语法
markdown基础语法笔记,方便翻看. 1. 标题 标题有3中写法,可混写: (1)# ***,前面#,后面文字,注意,#与文字间有空格,1-6个#分别表示h1-h6,h1.h2下有横线 (2)== ...
- python脚本打包成exe可执行文件
1. 工具pyinstaller (pip install pyinstaller) 2.生成exe (pyinstaller -F -w Capturing_PDFs.py) 参数 -F 生成单个文 ...
- ansible变量定义
一./etc/ansible/hosts [webServers] 192.168.2.200 http_port=8009 [web]web1web2 [db]db1db2 [app:childre ...
- Ion-select and ion-option list styling 自定义样式
https://forum.ionicframework.com/t/ion-select-and-ion-option-list-styling/117028
- vue路由跳转push,replace,go
this.$router.replace({ path: "/subpagest" });//不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 his ...
- Mountain Number FZU-2109数位dp
Mountain NumberFZU-2109 题目大意:一个大于0的数字x,分写成x=a[0]a[1]a[2][3]..a[n]的形式,(比如x=1234,a[0]=1,a[1]=2,a[3]=3, ...
- redis 关闭持久化 实验验证
前言 由于redis持久化(RDB),导致我们的线上的磁盘被写炸 线上服务器是 64H 512G 大概写了rdb文件是 200G左右,写满了当时的目录 处理策略 关闭持久化,由于之前的现象表示,我们线 ...