react中使用动画 react-transition-group

在React中通过react-transition-group使用过渡、动画，首先要有CSS3中的过渡和动画的相关知识储备，可以参考过渡和2D变换、动画和3d变换。

我们自己通过css设置过渡、动画，需要给不同的class添加变化属性，比如位移、缩放大小或者旋转角度，再通过切换类名来达到动画的效果，那么在react-transition-group当中，仍然需要在不同的class上定义不同的css样式，简化的是，不需要我们再来进行判断切换类名，它规定了进入动画、退出动画分别的class后缀，我们只需要按照一定的规范去定义这些class即可。

可以看到class是有一个变化的过程的，当传入属性的值由true变成false时，即显示到隐藏，class的变化过程为 enter enter-active 及enter-done，传入属性的值由false变成true时，及隐藏到显示，class的变化过程为 exit exit-active和exit-done，知道react-transition-group的应用规律之后，再来看看它提供的主要API。

这样第三方的库，首先要做的事情就是安装 npm i react-transition-group --save

最常用的是CSSTransition，它提供了与css相关的变化，它提供了一些属性供我们使用

(1) in 传入boolean值，传入的是true代表开启 enter enter-active和enter-done的这一变化过程，传入false代码开启 exit exit-active exit-done这一过程 (必传)
(2) timeout 表示执行时间，enter-active到enter-done 或者 exit-active到exit-done的执行时间 (必传)
(3) classNames 定义添加的类名，这里定义的类名会被添加到 enter-xxx 及 exit-xxx 的之前
(4) ummountOnExit 默认为false，表示当传入in的值为false值，CSSTransition中的元素不从dom中移除，传true时则会被移除

可以看到class在 enter / exit之前都增加了一个自定义的class属性box，以及当方块消失的时候，方块的dom元素被移除了，实现代码如下

// jsx代码
import React, { Component } from "react";
import { CSSTransition } from 'react-transition-group'
import './style.css';export default class CSSTransitionDemo extends Component {constructor(props){super(props);this.state = {isShow: true}}render(){const { isShow } = this.state;return(<div className="simpleTransition"><button onClick={()=>this.setState({isShow:!isShow})}>当前状态：{isShow ? '显示' : '隐藏'}</button><CSSTransition in={isShow}classNames="box"timeout={1000}unmountOnExit={true}><div className="helloBox">hello</div></CSSTransition></div>)}
}// css代码
.box-enter {opacity: 0;transform: scale(0.6)
}.box-enter-active {opacity: 1;transform: scale(1);transition: all 1000ms;
}.box-exit {opacity: 1;transform: scale(1);
}.box-exit-active {opacity: 0;transform: scale(.6);transition: all 1000ms
}

在上面我特地点击了刷新按钮，可以看到第一次展示的时候是没有加载动画的，如果需要得自行定义，还可以增加动画操作阶段的回调方法

(5) appear 定义首次加载的动画, 同时需要在css中添加对应的类名和样式, 可以与enter一致
(6) 动画执行还有一些回调方法，需传入函数，函数有一个入参，参数为CSSTransition所包裹的元素
onEnter、onEntering、onEntered、onExit、onExiting、onExited

实现代码如下

// jsx
<CSSTransition in={isShow}classNames="box"timeout={1000}unmountOnExit={true}appearonEnter={ el=>console.log('开始进入',el)}onEntering={ el => console.log('正在进入')}onEntered={ el => console.log('进入完成')}onExit={ el => console.log('开始退出')}onExiting={ el => console.log('正在退出')}onExited={ el => console.log('退出完成')}>// ...
</CSSTransition>// css
.box-enter, .box-appear {opacity: 0;transform: scale(0.6)
}.box-enter-active, .box-appear-active {opacity: 1;transform: scale(1);transition: all 1000ms;
}

这是最常用的CSSTransition，再来说说 SwitchTransition，SwitchTransition的作用就是切换展示的内容，有两种模式，分别是先隐藏旧内容再展示新的内容（out-in），先展示新内容再展示旧内容（in-out）

实现代码如下，需要CSSTransition配合使用，此时CSSTransition不需要定义in属性，因为in属性为false时就直接不展示整个元素了，此时需要定义不同的key来进行区分

// jsx
<SwitchTransition mode="out-in"><CSSTransition key={isShow ? 'on' : 'off'}classNames="btn"timeout={1000}><button onClick={e=>this.setState({ isShow: !isShow })}>{isShow ? 'on' : 'off'}</button></CSSTransition>
</SwitchTransition>// css
.btn-enter {opacity: 0;transform: translateX(100%)
}.btn-enter-active {opacity: 1;transform: translateX(0);transition: opacity 1s, transform 1s
}.btn-exit {opacity: 1;transform: translateX(0)
}.btn-exit-active {opacity: 0;transform: translateX(-100%);transition: opacity 1s, transform 1s;
}

还有一个是GroupTransition，用来给CSSTransition分组，当通过遍历来给元素添加 CSSTransition的动画时，需要再最外层增加 GroupTransition 才能添加上动画

实现代码如下

<TransitionGroup>{this.state.movies.map((item, index)=>(<CSSTransition key={item.id}classNames="movie"timeout={1000}><div>{item}</div></CSSTransition>))}<button onClick={e=>this.addMovies()}>添加电影</button>
</TransitionGroup>

对于遍历还要注意一点，本身react遍历数据时是希望我们加上唯一的key值，一方面是因为dom的diff算法进行比较时能够提高性能，另一方面，有时候没有key值会出现一些错误，比如像以下情况，逆序删除元素的时候，删除的是第一个元素，但是却给最后一个元素添加了动画

以上就是react-transition-group当中常用的三个组件，CSSTransition、SwitchTransition与TransitionGroup

react中使用动画 react-transition-group相关推荐

react 交互_如何在React中建立动画微交互
react 交互 Microinteractions guide a user through your application. They reinforce your user experienc ...
React中过渡动画的编写方式
文章目录 React的过渡动画过渡动画库的介绍 CSSTransition(掌握) SwitchTransition(了解) TransitionGroup(了解) React的过渡动画过渡动画库 ...
react中函数式组件React Hooks
React Hooks 函数式组件使用hooks理由高阶组件为了复用,导致代码层级复杂生命周期的复杂写成functional组件,无状态组件,因为需要状态,又改成了class,成本高在16. ...
react中html转换,React中的HTML转义写法
在JSX中输出固定内容直接使用UTF-8字符 {代码...} 使用HTML转义字符 {代码...} 或者十进制的转义字符 {代码...} 动态内容的转义但是如果在外面加一层大括号的话,react为 ...
boost::unorder_map如何插入元素_「React」如何在React中优雅的实现动画
最简单的动画组件实现动画的本质,无非就是一个状态样式到另一个状态样式的过渡.最简单的动画组件,我们只需要指定两个状态的样式(进入的样式,离开的样式),以及一个开关(控制状态),即可完成. codep ...
React中添加class——借助第三方库classnames
一.vue中添加class vue中添加class是一件非常简单的事情: 你可以通过传入一个对象: 你也可以传入一个数组: 甚至是对象和数组混合使用: 二.React中添加class React在JS ...
React中diff算法的理解
React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...
React 中constructor 作用
React 中constructor 作用 react中的constructor大体有两个作用 1.初始化this.state 2.纠正方法的this的指向 constructor(props) {s ...
React学习(十)-React中编写样式CSS(styled-components)
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 VX-ID:suibichuanji 点 ...

react中使用动画 react-transition-group

react中使用动画 react-transition-group相关推荐

最新文章

热门文章