react——样式——过渡动画组件——结合animate库

在项目中可能会给一些组件的显示或隐藏添加某种过渡动画，这样可以很好的增加用户的使用体验， react-transition-group是react的第三方模块，借住这个模块可以实现动画切换效果

安装

npm i -S react-transition-group

使用CSSTransition

CSSTransition 让元素有过渡效果，CSSTransition子元素只能是一个

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

重要属性

• timeout 组件动画时长 必须的属性 ms ,真实的动画还得看写css的动画时间
• in 动画开关，进场或出场 boolean true进入 false退场
• classNames 指定动画的样式名称或样式定义的前缀名 {}|string
• unmountOnExit 退场后，删除动画dom元素
• appear 第1次，访问时如果in为true，进行的动画

动画持续时间也就是类名的存在时间，已经切换类名

/* 刚开始的进入和结束 */
.niu-enter,.niu-exit-done,.niu-appear{opacity: 0;transform: scale(.6);
}
/* 进入过程  */
.niu-enter-active,.niu-appear-active{opacity: 1;transform: scale(1);transition: opacity 300ms transform 300ms;
}
/* 结束过程 */
.niu-exit-active{opacity: 0;transform: scale(.6);transition: all 300ms;
}/* 完成进入和开始消失 */
/* .niu-enter-done,.niu-exit{opacity: 1;
} */

用法：

<CSSTransitionin={show}timeout={300}classNames ="niu"unmountOnExit = {true}appear = {true}
>
<div style={{display:"inline-block"}}><h3>我是内容</h3>
</div>
</CSSTransition>

结合animate库

animate.css动画库集成到react-transation-group动画模块中
网址：https://animate.style/

npm install animate.css --save

import 'animate.css';

//自定义的类名（定义动画效果，进场前，进场后直到结束，结束前，结束后）
classNames={{enter: "animate__animated",enterActive: "animate__fadeIn",exit: "animate__animated",exitActive: "animate__fadeOut",
}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！