React之动画库使用--react-transition-group

时间：2019-11-20 13:14:19 阅读：51 评论：0 收藏：0 [点我收藏+]

## 安装react-transition-group ##

npm install react-transition-group --save 或者 npm i react-transition-group -S

## 使用react-transition-group##

react-transition-group有三类动画库：

Transition
CSSTransition
TransitionGroup

例子引入CSSTransition动画库：

import {CSSTransition} from ‘react-transition-group‘

##使用案例##

<CSSTransition 
        in={this.state.isShow}   //用于判断是否出现的状态
        timeout={2000}           //动画持续时间
        classNames="animation"   //className值，防止重复
        unmountOnExit // 退出动画事，删除DOM
 >
        <div>动画展示区</div>
</CSSTransition>

CSS常用特效：

xxx-enter: 进入（入场）前的CSS样式；

xxx-enter-active:进入动画直到完成时之前的CSS样式;

xxx-enter-done:进入完成时的CSS样式;

xxx-exit:退出（出场）前的CSS样式;

xxx-exit-active:退出动画知道完成时之前的的CSS样式。

xxx-exit-done:退出完成时的CSS样式。


CSS代码如下：

.animation-enter{

　　opacity: 0;

}

.animation-enter-active{

　　opacity: 1;

　　color：#ff0000；

　　transition: opacity 2000ms;

}

.animation-enter-done{

　　opacity: 1;

color：#e70000；

}

.animation-exit{

　　opacity: 1;

color:#666;

}

.animation-exit-active{

　　opacity: 0;

　　transition: opacity 3000ms;

}

.animation-exit-done{

　　opacity: 0;

}

React之动画库使用--react-transition-group

原文：https://www.cnblogs.com/linjiu0505/p/11896406.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)