css 入场动画_React系列十四 React过渡动画
在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验。
当然,我们可以通过原生的CSS来实现这些过渡动画,但是React社区为我们提供了react-transition-group用来完成过渡动画。
一. react-transition-group介绍
React曾为开发者提供过动画插件 react-addons-css-transition-group
,后由社区维护,形成了现在的 react-transition-group
。
这个库可以帮助我们方便的实现组件的 入场
和 离场
动画,使用时需要进行额外的安装:
# npmnpm install react-transition-group --save
# yarnyarn add react-transition-group
react-transition-group本身非常小,不会为我们应用程序增加过多的负担。
react-transition-group主要包含四个组件:
- Transition
- 该组件是一个和平台无关的组件(不一定要结合CSS);
- 在前端开发中,我们一般是结合CSS来完成样式,所以比较常用的是CSSTransition;
- CSSTransition
- 在前端开发中,通常使用CSSTransition来完成过渡动画效果
- SwitchTransition
- 两个组件显示和隐藏切换时,使用该组件
- TransitionGroup
- 将多个动画组件包裹在其中,一般用于列表中元素的动画;
二. react-transition-group使用
2.1. CSSTransition
CSSTransition是基于Transition组件构建的:
- CSSTransition执行过程中,有三个状态:appear、enter、exit;
- 它们有三种状态,需要定义对应的CSS样式:
- 第一类,开始状态:对于的类是-appear、-enter、exit;
- 第二类:执行动画:对应的类是-appear-active、-enter-active、-exit-active;
- 第三类:执行结束:对应的类是-appear-done、-enter-done、-exit-done;
CSSTransition常见对应的属性:
- in:触发进入或者退出状态
- 如果添加了
unmountOnExit={true}
,那么该组件会在执行退出动画结束后被移除掉; - 当in为true时,触发进入状态,会添加-enter、-enter-acitve的class开始执行动画,当动画执行结束后,会移除两个class,并且添加-enter-done的class;
- 当in为false时,触发退出状态,会添加-exit、-exit-active的class开始执行动画,当动画执行结束后,会移除两个class,并且添加-enter-done的class;
- 如果添加了
- classNames:动画class的名称
- 决定了在编写css时,对应的class名称:比如card-enter、card-enter-active、card-enter-done;
- timeout:
- 过渡动画的时间
- appear:
- 是否在初次进入添加动画(需要和in同时为true)
- 其他属性可以参考官网来学习:
- https://reactcommunity.org/react-transition-group/transition
CSSTransition对应的钩子函数:主要为了检测动画的执行过程,来完成一些JavaScript的操作
- onEnter:在进入动画之前被触发;
- onEntering:在应用进入动画时被触发;
- onEntered:在应用进入动画结束后被触发;
import './App.css'
import { CSSTransition } from 'react-transition-group';
import { Card, Avatar, Button } from 'antd';import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
const { Meta } = Card;
export default class App extends PureComponent { constructor(props) { super(props);
this.state = { isShowCard: true } }
render() { return (
this.setState({isShowCard: !this.state.isShowCard})}>显示/隐藏 classNames="card"
timeout={1000}
unmountOnExit={true}
onEnter={el => console.log("进入动画前")}
onEntering={el => console.log("进入动画")}
onEntered={el => console.log("进入动画后")}
onExit={el => console.log("退出动画前")}
onExiting={el => console.log("退出动画")}
onExited={el => console.log("退出动画后")}
> style={{ width: 300 }}
cover={
data-5ce-guid="d1311180-784a-eb11-8da9-e4434bdf6706" data-src="http://p04.5ceimg.com/content/d1311180-784a-eb11-8da9-e4434bdf6706.png" data-lazy="true" src="http://thumb.5ce.com/images/loading.gif"
/>
}
actions={[,,,
]}
> avatar={}
description="This is the description"
/>
)
}
}
对应的css样式如下:
.card-enter, .card-appear { opacity: 0; transform: scale(.8);}
.card-enter-active, .card-appear-active { opacity: 1; transform: scale(1); transition: opacity 300ms, transform 300ms;}
.card-exit { opacity: 1;}
.card-exit-active { opacity: 0; transform: scale(.8); transition: opacity 300ms, transform 300ms;}
2.2. SwitchTransition
SwitchTransition可以完成两个组件之间切换的炫酷动画:
- 比如我们有一个按钮需要在on和off之间切换,我们希望看到on先从左侧退出,off再从右侧进入;
- 这个动画在vue中被称之为 vue transition modes;
- react-transition-group中使用SwitchTransition来实现该动画;
SwitchTransition中主要有一个属性:mode,有两个值
- in-out:表示新组件先进入,旧组件再移除;
- out-in:表示就组件先移除,新组建再进入;
如何使用SwitchTransition呢?
- SwitchTransition组件里面要有CSSTransition或者Transition组件,不能直接包裹你想要切换的组件;
- SwitchTransition里面的CSSTransition或Transition组件不再像以前那样接受in属性来判断元素是何种状态,取而代之的是key属性;
我们来演练一个按钮的入场和出场效果:
import { SwitchTransition, CSSTransition } from "react-transition-group";
export default class SwitchAnimation extends PureComponent { constructor(props) { super(props);
this.state = { isOn: true } }
render() { const {isOn} = this.state;
return ( <SwitchTransition mode="out-in"><CSSTransition classNames="btn"timeout={500}key={isOn ? "on" : "off"}> {<button onClick={this.btnClick.bind(this)}> {isOn ? "on": "off"}button> }CSSTransition>SwitchTransition> ) }
btnClick() { this.setState({isOn: !this.state.isOn}) }}
对应的css代码:
.btn-enter { transform: translate(100%, 0); opacity: 0;}
.btn-enter-active { transform: translate(0, 0); opacity: 1; transition: all 500ms;}
.btn-exit { transform: translate(0, 0); opacity: 1;}
.btn-exit-active { transform: translate(-100%, 0); opacity: 0; transition: all 500ms;}
2.3. TransitionGroup
当我们有一组动画时,需要将这些CSSTransition放入到一个TransitionGroup中来完成动画:
import React, { PureComponent } from 'react'import { CSSTransition, TransitionGroup } from 'react-transition-group';
export default class GroupAnimation extends PureComponent { constructor(props) { super(props);
this.state = { friends: [] } }
render() { return ( <div><TransitionGroup> { this.state.friends.map((item, index) => { return (<CSSTransition classNames="friend" timeout={300} key={index}><div>{item}div>CSSTransition> ) }) }TransitionGroup><button onClick={e => this.addFriend()}>+friendbutton>div> ) }
addFriend() { this.setState({ friends: [...this.state.friends, "coderwhy"] }) }}
css 入场动画_React系列十四 React过渡动画相关推荐
- hide show vue 动画_Vue2.x学习四:过渡动画
Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 请注意它的应用场景 并不是说我们写了一个动画之后让它一直在动,而是在一个模块显示或隐藏的时候去做一种特效,使得它的过程有过渡 ...
- Git使用 从入门到入土 收藏吃灰系列 (十四) 清除git仓库的所有提交记录
文章目录 一.前言 二.清除git仓库的所有提交记录 本节速览 清除git仓库的所有提交记录 一.前言 参考安装Git 详细安装教程 参考视频B站 Git最新教程通俗易懂,这个有点长,感觉讲的精华不多 ...
- Redis系列(十四)、Redis6新特性之RESP3与客户端缓存(Client side caching)
Redis6引入新的RESP3协议,并以此为基础加入了客户端缓存的新特性,在此特性下,大大提高了应用程序的响应速度,并降低了数据库的压力,本篇就带大家来看一下Redis6的新特性:客户端缓存. 目录 ...
- Reflex WMS入门系列十四:在Reflex系统上创建一个Receipt
Reflex WMS入门系列十四:在Reflex系统上创建一个Receipt 很多情况下,使用Reflex WMS系统的企业都会使用某个ERP系统,比如SAP,Oracle EBS等,用以支持企业供应 ...
- React 过渡动画 路由 ui
过渡动画 下载react-transition-group cnpm i react-transition-group --save CSSTransition实现单元素过渡动画 (1) unmoun ...
- android过渡动画旋转,炫酷的Android过渡动画
[桃花潭水深千尺,不及汪伦送我情] 不知道大家有没有发现,Android版的掘金有下面这个小小动画:点击作者头像跳转到作者的详情页,而作者头像会从当前界面通过动画过渡详情页界面. image 知识贫乏 ...
- React Native入门(十四)之动画(1)Animated详解
前言 在APP的开发中,流畅合理的动画能大大提高用户体验,Android和iOS原生都有对应的动画系统,同样的在RN中也有用于创建动画的API,就是Animated.Animated库使得开发者可以非 ...
- 十四款常用动画制作软件
一.Ulead GIF Animator V5.05 汉化绿色特别版 GIF动画制作软件 下载地址 http://www.duote.com/soft/15782.html [基本介绍] 友立公司出版 ...
- Silverlight Blend动画设计系列十二:三角函数(Trigonometry)动画之自由旋转(Free-form rotation)...
说到对象的旋转,或许就会联想到对象角度的概念.对象的旋转实现实际上就是利用对象的角度改变来实现的位置变换,在<Silverlight & Blend动画设计系列二:旋转动画(Rotate ...
最新文章
- LeetCode刷题指南!
- 运算符优先级和结合性
- Java SE 6.0编程指南_Java SE 6.0 编程指南(附光盘)
- 框架复习笔记-Java-案例:牛客网讨论社区
- wxpython 可视化开发pdf_MicroPython for the Internet of Things.pdf
- 儿童卫士360智能手表,给孩子更多保护
- PPLIVE加速器导致无法正常上网
- 软件测试方案和计划的区别和联系
- 怎么把图片文字转换成文字
- Java class对象说明 Java 静态变量声明和赋值说明
- Mac无法打开CORE Keygen
- 原型模型| 软件工程
- iPhone 可以DIY了?苹果推出自助维修计划
- Android要ios王者,王者荣耀怎么转区 安卓转苹果需要什么要求
- web 前端签名插件_signature_pad插件实现电子签名功能
- infra-structure Ad Hoc
- 神经网络有哪些基本功能,常见的神经网络有哪些
- 如何学习python?
- 【转】MAPI over HTTP协议
- 总有一张图片会撩拨起你初恋时的心弦(转载)
热门文章
- JDK,JRE和JVM之间的区别
- 为什么你的发行版仍然在使用“过时的”Linux 内核? | Linux 中国
- 微软将为Linux 操作系统带来TEE的支持:TEE(Trusted Execution Environment,可信执行环境)
- 基于MPI并行的VTI介质逆时偏移成像与ADCIGs提取
- java 判断是不是微信打开_Java判断浏览器是微信还是支付宝
- echarts年龄饼图_解决echarts饼图显示百分比,和显示内容字体及大小
- Python基础学习总结、学习展望
- 工信部高级软件工程师证书有用吗_考bim工程师证书有用吗
- BaseRecyclerViewAdapterHelper: 灵活强大的循环适配器
- 华为大数据中心山西_任正非:华为愿与山西一道建立“煤矿人工智能创新实验室”...