React过渡动画组件基础使用介绍
目录
- 1. 基础使用
- 2. 将animate.css集成到csstranistion中
- 3. 列表过渡
- 4. switchTransition动画
- 5. 路由切换过渡
- 6. 高阶组件实现路由切换过渡
1. 基础使用
介绍：
在项目中可能会给一些组件的显示或隐藏添加某种过渡动画，这样可以很好的增加用户的使用体验， react-transition-group 是 react 的第三方模块，借助这个模块可以实现动画切换效果。
安装：
yarn add react-transition-group
使用：
上面这张图描述了一个动画过渡的过程，它表示动画在入场阶段，透明度由0变为1，在出场阶段，透明度由1变为0。
接下来我们实现一下上述过程：
父组件：
import React, { Component } from 'react'
// CSSTransition 让元素有过渡效果，CSSTransition的子元素只能是一个
import { CSSTransition } from 'react-transition-group'
import './style/transistion.css'
class App extends Component {
state = {
show: true
}
render() {
const { show } = this.state
return (
<div>
<button onClick={() => this.setState(state => ({ show: !state.show }))}>显示/隐藏</button>
<hr />
{/*
重要属性
timeout 组件动画时长 必须要有的属性，单位是ms ,真实的动画还得看写css的动画时间，也就是说这里的事件要和css中写的动画时间保持一致
in 动画开关，进场或出场 它的值是一个boolean，true：进入，false：退场
classNames 指定动画的样式名称或样式定义的前缀名 {}|string，这个属性可以防止重名
unmountOnExit 退场后，删除动画dom元素
appear 第1次，访问时如果in为true，进行的动画
*/}
<CSSTransition
in={show}
timeout={300}
classNames="fade"
unmountOnExit={true}
appear={true}
>
<div>
<h3>我是内容</h3>
</div>
</CSSTransition>
</div>
)
}
}
export default App
css样式：
/* 进场起始和出场结束，透明度都是0 */
.fade-enter,
.fade-exit-done,
.fade-appear {
opacity: 0;
/* transform: scale(.6); */
}
/* 进场由0变为1的动画时间 */
.fade-enter-active,
.fade-appear-active {
opacity: 1;
/* transform: scale(1); */
transition: opacity 300ms;
}
/* 出场由1变为0的动画时间 */
.fade-exit-active {
opacity: 0;
/* transform: scale(.6); */
transition: all 300ms;
}
2. 将animate.css集成到csstranistion中
安装：
yarn add animate.css
使用：
父组件：
import React, { Component } from 'react'
// CSSTransition 让元素有过渡效果，CSSTransition子元素只能是一个
import { CSSTransition } from 'react-transition-group'
import 'animate.css'
// 注意这个文件要放在animate.css的下面，防止覆盖
import './style/transistion.css'
class App extends Component {
state = {
show: true
}
render() {
const { show } = this.state
return (
<div>
<button onClick={() => this.setState(state => ({ show: !state.show }))}>显示/隐藏</button>
<hr />
{/*
重要属性
timeout 组件动画时长 必须的属性 ms ,真实的动画还得看写css的动画时间
in 动画开关，进场或出场 boolean true进入 false退场
classNames 指定动画的样式名称或样式定义的前缀名 {}|string
unmountOnExit 退场后，删除动画dom元素
*/}
<CSSTransition
in={show}
timeout={300}
// 自定义的类名
classNames={{
// 刚进入动画
enter: 'animate__animated',
// 刚退出动画
exit: 'animate__animated',
// 进入过程中
enterActive: 'animate__fadeIn',
// 退出过程中
exitActive: 'animate__fadeOut'
}}
// 默认为真，即删除
unmountOnExit
>
<div style={{ display: 'inline-block' }}>
<h3>我是内容</h3>
</div>
</CSSTransition>
</div>
)
}
}
export default App
css样式：
:root {
/* 更改根节点中的元素的值 */
/* 动画持续时间 */
--animate-duration: 300ms;
/* 动画延迟 */
--animate-delay: 300ms;
}
/* 进场起始和出场结束，透明度都是0 */
.fade-enter,
.fade-exit-done,
.fade-appear {
opacity: 0;
/* transform: scale(.6); */
}
/* 进场由0变为1的动画时间 */
.fade-enter-active,
.fade-appear-active {
opacity: 1;
/* transform: scale(1); */
transition: opacity 300ms;
}
/* 出场由1变为0的动画时间 */
.fade-exit-active {
opacity: 0;
/* transform: scale(.6); */
transition: all 300ms;
}
3. 列表过渡
介绍：
当需要用到多个 css 动画过渡效果时，我们可以使用 TransitionGroup 组件将 CSSTransition 组件包裹起来，实现列表过渡。
注意：使用了 TransitionGroup 组件，则里面的 CSSTransition 属性中的 in 无效，要用唯一不重复的 key 来代替换，且 key 的值必须为字符串类型，否则报错。
使用：
父组件：
import React, { Component } from 'react'
// CSSTransition 让元素有过渡效果，CSSTransition子元素只能是一个
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import './style/transistion.css'
class App extends Component {
state = {
todos: []
}
render() {
const { todos } = this.state
return (
<div>
<TransitionGroup>
{/* 使用了TransitionGroup组件，则里面的CSSTransition属性in无效，用要唯一不重复的key来代替换 */}
{todos.map((item, index) => (
<CSSTransition key={index + ''} timeout={300} classNames="fade" unmountOnExit>
<div>
<span>{item}</span>
<span
onClick={() => {
this.setState(state => ({
todos: state.todos.filter(val => val != item)
}))
}}
>
-- 删除
</span>
</div>
</CSSTransition>
))}
</TransitionGroup>
<hr />
<button
onClick={() => {
this.setState(state => ({
todos: [...state.todos, Date.now() + '']
}))
}}
>
添加任务
</button>
</div>
)
}
}
export default App
css样式：
:root {
/* 更改根节点中的元素的值 */
/* 动画持续时间 */
--animate-duration: 300ms;
/* 动画延迟 */
--animate-delay: 300ms;
}
/* 进场起始和出场结束，透明度都是0 */
.fade-enter,
.fade-exit-done,
.fade-appear {
opacity: 0;
/* transform: scale(.6); */
}
/* 进场由0变为1的动画时间 */
.fade-enter-active,
.fade-appear-active {
opacity: 1;
/* transform: scale(1); */
transition: opacity 300ms;
}
/* 出场由1变为0的动画时间 */
.fade-exit-active {
opacity: 0;
/* transform: scale(.6); */
transition: all 300ms;
}
4. switchTransition动画
父组件：
import React, { Component } from 'react'
// CSSTransition 让元素有过渡效果，CSSTransition子元素只能是一个
import { CSSTransition, SwitchTransition } from 'react-transition-group'
import './style/transistion.css'
class App extends Component {
state = {
on: true
}
render() {
const { on } = this.state
return (
<div>
{/*
动画切换的模式
in-out 先进入，再退出
out-in 先退出，再进入 默认值
*/}
{/* <SwitchTransition mode='in-out'> */}
<SwitchTransition mode='out-in'>
{/* 在SwitchTransition中它要想有动画，用key */}
<CSSTransition key={on ? 'a' : 'b'} timeout={300} classNames="fade">
<h3 style={{ display: 'inline-block' }}>{on ? '你好' : '再见'}</h3>
</CSSTransition>
</SwitchTransition>
<hr />
<button
onClick={() => {
this.setState(state => ({
on: !state.on
}))
}}
>
改变
</button>
</div>
)
}
}
export default App
css样式：
:root {
/* 更改根节点中的元素的值 */
/* 动画持续时间 */
--animate-duration: 300ms;
/* 动画延迟 */
--animate-delay: 300ms;
}
/* 进场起始和出场结束，透明度都是0 */
.fade-enter,
.fade-exit-done,
.fade-appear {
opacity: 0;
transform: scale(.6);
}
/* 进场由0变为1的动画时间 */
.fade-enter-active,
.fade-appear-active {
opacity: 1;
transform: scale(1);
transition: opacity 300ms,transform 300ms;
}
/* 出场由1变为0的动画时间 */
.fade-exit-active {
opacity: 0;
/* transform: scale(.6); */
transition: all 300ms;
}
5. 路由切换过渡
父组件（注意这里的过渡动画样式 css 文件已在入口文件引入）：
import React, { Component } from 'react'
import { Switch, Route, Link, withRouter } from 'react-router-dom'
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import RenderCmp from './views/Render'
import Login from './views/Login'
@withRouter
class App extends Component {
render() {
return (
<div>
<Link to="/login">login</Link> --
<Link to="/render">render</Link>
<hr />
{/* 用 TransitionGroup 一包裹，就不用定义in属性了 */}
<TransitionGroup>
{/* 把路由地址当做唯一不可重复的key值 */}
<CSSTransition timeout={300} key={this.props.location.key} classNames="router">
<Switch>
<Route path="/login" component={Login} />
<Route path="/render" component={RenderCmp} />
</Switch>
</CSSTransition>
</TransitionGroup>
</div>
)
}
}
export default App
css样式：
:root {
/* 更改根节点中的元素的值 */
/* 动画持续时间 */
--animate-duration: 300ms;
/* 动画延迟 */
--animate-delay: 300ms;
}
/* 进场起始和出场结束，透明度都是0 */
.fade-enter,
.fade-exit-done,
.fade-appear {
opacity: 0;
transform: scale(.6);
}
/* 进场由0变为1的动画时间 */
.fade-enter-active,
.fade-appear-active {
opacity: 1;
transform: scale(1);
transition: opacity 300ms,transform 300ms;
}
/* 出场由1变为0的动画时间 */
.fade-exit-active {
opacity: 0;
/* transform: scale(.6); */
transition: all 300ms;
}
/* ---------------------------------- */
.router-enter {
opacity: 0;
}
.router-enter-active {
opacity: 1;
transition: all 300ms;
}
.router-exit-active {
opacity: 0;
transition: all 0ms;
}
6. 高阶组件实现路由切换过渡
介绍：
有些时候路由会特别多，而有些路由需要动画，有些则不需要，我们可以使用高阶组件，将需要过渡动画的路由用高阶组件包裹，没有包裹的路由则没有过渡动画。
使用：
父组件：
import React, { Component } from 'react'
import { Route, Link, withRouter } from 'react-router-dom'
import RenderCmp from './views/Render'
import Login from './views/Login'
@withRouter
class App extends Component {
render() {
return (
<div>
<Link to="/login">login</Link> --
<Link to="/render">render</Link>
<hr />
{/* 这里用 children 渲染方式，因为这种渲染方式，无论路由是否匹配到，路由对应的组件都在，都在才能添加动画效果 */}
<Route path="/login" children={router => <Login {...router} />} />
<Route path="/render" children={router => <RenderCmp {...router} />} />
</div>
)
}
}
export default App
子组件：
import React, { Component } from 'react'
import withTransition from '../../hoc/withTransition'
@withTransition
class Login extends Component {
render() {
return (
<div>
<h3>用户登录</h3>
<button
onClick={() => {
sessionStorage.setItem('uid', 1)
this.props.history.push('/render')
}}
>
登录一下
</button>
</div>
)
}
}
export default Login
定义高阶组件：
import React, { Component } from 'react';
import { CSSTransition } from 'react-transition-group'
const withTransition = Cmp => {
return class extends Component {
render() {
return (
<>
<CSSTransition
in={this.props.match ? true : false}
timeout={300}
classNames='fade'
unmountOnExit
>
<>
{this.props.match
? <Cmp {...this.props} /> : <div></div>}
</>
</CSSTransition>
</>
);
}
}
}
export default withTransition
css样式：
.router-enter {
opacity: 0;
}
.router-enter-active {
opacity: 1;
transition: all 300ms;
}
.router-exit-active {
opacity: 0;
transition: all 0ms;
}
到此这篇关于React过渡动画组件基础使用介绍的文章就介绍到这了,更多相关React过渡动画内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
详解如何给React-Router添加路由页面切换时的过渡动画
PS: 本篇文章使用的React-Router版本为react-router-dom: ^5.0.0 (兼容4.x) 使用过Vue2的同学们应该都知道<transition>这个内置组件,它可以帮我们添加过渡动画,之前一直用它来给Vue-Router路由的跳转添加转场动画,使用起来非常便捷.那在React中应该如何给路由切换添加过渡动画呢? react-transition-group 我们需要借助React的官方动画库react-transition-group,文档戳这里 react-tr
-
react组件中过渡动画的问题解决
目录 一.是什么 二.如何实现 CSSTransition SwitchTransition TransitionGroup 一.是什么 在日常开发中,页面切换时的转场动画是比较基础的一个场景 当一个组件在显示与消失过程中存在过渡动画,可以很好的增加用户的体验 在react中实现过渡动画效果会有很多种选择,如react-transition-group,react-motion,Animated,以及原生的CSS都能完成切换动画 二.如何实现 在react中,react-transition-g
-
React过渡动画组件基础使用介绍
目录 1. 基础使用 2. 将animate.css集成到csstranistion中 3. 列表过渡 4. switchTransition动画 5. 路由切换过渡 6. 高阶组件实现路由切换过渡 1. 基础使用 介绍: 在项目中可能会给一些组件的显示或隐藏添加某种过渡动画,这样可以很好的增加用户的使用体验, react-transition-group 是 react 的第三方模块,借助这个模块可以实现动画切换效果. 安装: yarn add react-transition-group 使
-
Vue组件基础操作介绍
目录 一.组件 二.组件的创建 三.组件中的data 四.组件中的methods 一.组件 组件是vue的重要的特征之一,可以扩展html的功能,也可以封装代码实现重复使用. 二.组件的创建 1. 非脚手架方式下创建 第一步:使用Vue.extend创建组件 第二步:使用Vue.component注册组件 第三步:在html页面中使用组件 <div id="app"> <my-com></my-com> <!-- 使用组件:名称之间
-
十分钟带你快速上手Vue3过渡动画
目录 写在前面 Vue的transition组件 过渡demo class的命名规则 使用animation 过渡模式 appear属性 animate.css库的使用 使用动画序列 使用自定义过渡class 写在最后 写在前面 在实际开发中,为了增加用户体验,经常会使用到过渡动画,而过渡动画在CSS中是通过transition和animation实现的.而在Vue中,Vue本身中内置了一些组件和API可以帮助我们方便的实现过渡动画效果:接下来我们就学习一下. Vue的transition组件
-
Android中Activity过渡动画的实例讲解
目录 前言 分解动画 效果视频 解析 滑动动画 效果视频 解析 淡出动画 效果视频 解析 共享元素 共享单个元素 解析 共享多个元素 效果视频 全部代码 总结 前言 以前Activty之间得跳转非常生硬,自Android.5X后,Google对Activity的切换设计更多丰富的动画效果. Android 5.X提供了三种Transition类型,具体如下: ✧进入:一个进人的过渡动画决定Activity中的所有的视图怎么进入屏幕. ✧退出:一个退出的过渡动画决定-个Activity 中的所有视
-
Vue中的基础过渡动画及实现原理解析
前言 在日常开发中 动画是必不可少的一部分 不仅能让元素直接的切换显得更加自然 同时也能极大的增强用户体验 因此 在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡效果 同时也是支持JS的 不过在这个文章中讲述的都是如何利用CSS来实现过渡动画.keyframes动画以及实现的原理 过渡动画实现的原理 1.首先最基础的一点在于 如果你想要在单元素/单个组件之中实现过渡动画 那么 你需要在元素/组件所在的HTML标签之外包裹一层 <transition>标签
-
vue 组件中使用 transition 和 transition-group实现过渡动画
前言 记一次vue 组件中使用 transition 和 transition-group 设置过渡动画,总结来说可分为分为 name 版, js 钩子操作类名版, js 钩子操作行内样式版... template模板结构 // 单个元素 <transition name="自定义名字"> <p v-if="show">hello</p> </transition> // 列表元素: 注意group的直接子元素是v-f
-
vue中组件的过渡动画及实现代码
1. 和多个元素的过渡一样,用组件来替换transition中包裹的标签 <style> .fade-enter, .fade-leave-to { opacity: 0 } .fade-enter-active, .fade-leave-active { transition: opacity 2s } </style> </head> <body> <div id="demo"> <button @click=&q
-
Vue Transition实现类原生组件跳转过渡动画的示例
最近学习了Vue Transition的用法,感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记 官方文档:https://cn.vuejs.org/v2/guide/transitions.html 演示地址:http://www.coderlife.com (请在移动端查看,PC端查看请打开移动端调试模式) 前言 看了挺多Vue的UI框架都不带过渡动画,今天心血来潮,就把自己平时用的动效抽离出来.可直接通过脚手架init模版配合其他UI框架使用,不需要另外进行配置. 原理 模版中
-
vue实现过渡动画Message消息提示组件示例详解
目录 概述 目录结构 总结 概述 在我自己平时做项目的时候,必不可少的会用到message组件,用来对用户友好反馈,总之使用频率还是挺高的,刚开始工作的时候,经常用的就是组件库的现成的,想想也不能总是用别人现成的,最近模拟组件库调用方式自己写了一个消息提示组件,支持过渡效果,支持自己进行扩展. 目录结构 .src/component/MessageBox/MessageBox.vue代码: <template> //css实现过渡 <transition name="fade-