[React] 如何实现转场动画?

这个问题非常复杂, 我这边用白话文解释一下原理, 若有不对的地方, 请大家更正:

如果没有专场动画, 那么在路由切换的一瞬间, 加载下一个路由页面的组件, 注销上一个路由页面的组件;

但是如果加上专场动画, 比如专场动画时间为 500ms, 那么, 在咋合格 500ms 过程中, 首先要加载下一个路由页面的组件, 然后加载上一个渐进的动画。
同时不能注销掉当前路由, 需要给当前路由加载一个渐出的动画。
需要当两个页面完成动画时间, 完成页面覆盖切换之后, 然后注销上一个路由页面的组件;

所以涉及到的知识点:

  1. 如何做页面跳转拦截;
  2. 如何在页面路由组件不跳转的同时, 加载下一个页面的组件;
  3. 配置页面层级;
  4. 如何执行、加载、完成专场动画;
  5. 动画结束的时候手动注销组件;

具体实现, 可以参考以下两个文档: