react 组件连动效果_在React中写一个Animation组件为组件进入和离开加上动画/过度效果_情愿_前端开发者...

问题

在单页面应用中，我们经常需要给路由的切换或者元素的挂载和卸载加上过渡效果，为这么一个小功能引入第三方框架，实在有点小纠结。不如自己封装。

思路

原理

以进入时 opacity: 0 –> opacity: 1  ，退出时 opacity: 0 –> opacity: 1 为例

元素挂载时

1.挂载元素dom

2.设置动画 opacity: 0 –> opacity: 1

元素卸载时

1.设置动画 opacity: 0 –> opacity: 1

2.动画结束后卸载dom

组件设计

为了使得组件简单易用、低耦合，我们期望如下方式来调用组件：

属性名

类型

描述

isShow

Boolean

子元素显示或隐藏控制

name

String

指定一个name，动画进入退出时的动画

在 App.jsx 里调用组件：

通过改变isShow的值来指定是否显示

// App.jsx

// 其他代码省略

import './app.

根据思路写代码

// Animation.jsx

import { PureComponent } from 'react';

import './index.

Demo示例

点我直达

总结

以上所述是小编给大家介绍的在React中写一个Animation组件为组件进入和离开加上动画/过度效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对前端开发者网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！