signed

QiShunwang

“诚信为本、客户至上”

react项目中 过渡效果的 引入

2020/8/19 22:26:18   来源:

react 过渡动效 的引入

1.先在终端 输入

yarn animate.css  react-transition-group

来安装 过渡动效的 第三方 插件

2.因css过渡动效在项目中很多地方都会用到 因此在index.js中引入 从而设为全局样式

import 'animate.css'

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1gfwofL8-1597846556718)(C:\Users\86152\AppData\Roaming\Typora\typora-user-images\image-20200819213326108.png)]

3.然后在需要过渡效果的文件中引入

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

4.在组件中定义一个开关来控制 过渡元素

例如[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YvBQYoYG-1597846556725)(C:\Users\86152\AppData\Roaming\Typora\typora-user-images\image-20200819213529546.png)]

5.把需要过渡的元素放在标签里面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hk437LUm-1597846556728)(C:\Users\86152\AppData\Roaming\Typora\typora-user-images\image-20200819213744517.png)]

标签里面的属性为

in={flag}   //控制过渡元素
classNames={{
enter:'animate__animated',
enterActive:'animate__slideInLeft',
exit:'animate__animated',
exitActive:'animate__slideOutLeft'      //这四个是过渡的类型

}}
unmountOnExit			过渡卸载
timeout={2000}			延时时间

6.通过一个button按钮来控制 flag

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-paVmkslL-1597846556731)(C:\Users\86152\AppData\Roaming\Typora\typora-user-images\image-20200819214157782.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bL2r1Vl2-1597846556733)(C:\Users\86152\AppData\Roaming\Typora\typora-user-images\image-20200819214214869.png)] 修改fl