react 页面跳转过渡效果怎么实现~~

Question

react + react-router开发的单页面应用, 由于没有加页面跳转的过渡效果, 点击之后很生硬, 很难看, 在网上搜索也没有发现什么具体的解决方案, 请问下 sf 的各位小哥哥姐姐们, 有没有遇到过这样的情况, 应该怎么实现这个共功能啊, 给萌新一个解决方案或者链接/提示什么的呗, 再次感谢感谢, 大吉大利~~

Answer 1

.animate-route{
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeRoute;
}

@keyframes fadeRoute {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

把animate-route加到你的父组件class上就行了

Answer 2

AnimationExample，react-router4有官方例子。你如果用的是3也可以仿照做一个。