鍍金池/ 問答/HTML5  HTML/ react 頁面跳轉(zhuǎn)過渡效果怎么實(shí)現(xiàn)~~

react 頁面跳轉(zhuǎn)過渡效果怎么實(shí)現(xiàn)~~

react + react-router開發(fā)的單頁面應(yīng)用, 由于沒有加頁面跳轉(zhuǎn)的過渡效果, 點(diǎn)擊之后很生硬, 很難看, 在網(wǎng)上搜索也沒有發(fā)現(xiàn)什么具體的解決方案, 請(qǐng)問下 sf 的各位小哥哥姐姐們, 有沒有遇到過這樣的情況, 應(yīng)該怎么實(shí)現(xiàn)這個(gè)共功能啊, 給萌新一個(gè)解決方案或者鏈接/提示什么的唄, 再次感謝感謝, 大吉大利~~

回答
編輯回答
下墜

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

2017年5月16日 09:18
編輯回答
萌小萌
.animate-route{
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeRoute;
}

@keyframes fadeRoute {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

把a(bǔ)nimate-route加到你的父組件class上就行了

2018年6月8日 16:40