主要介绍了在React中写一个Animation组件为组件进入和离开加上动画/过度效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

问题 在单页面应用中，我们经常需要给路由的切换或者元素的挂载和卸载加上过渡效果，为这么一个小功能引入第三方框架，实在有点小纠结。不如自己封装。 思路 原理 以进入时 opacity: 0 –> opacity: 1  ，退出时 opacity: 0 –> opacity: 1 为例 元素挂载时 1.挂载元素dom 2.设置动画 opacity: 0 –> opacity: 1 元素卸载时 1.设置动画 opacity: 0 –> opacity: 1 2.动画结束后卸载