代码清除页面切换过渡现象

Posted 2020-10-02 爱美的女孩儿

所谓的页面切换过渡现象，指的是假如我现在浏览了A页面，然后去浏览B页面，但是在B页面的被渲染的那一瞬间，上一个被浏览的A页面，会闪现一下，瞬间很短，只有仔细观察，才能看出，但是这个不解决，也不会影响用户体验。我个人感觉还是解决一下为好，这样可以让用户体验效果更好。下面是我的解决方案，放在一个例子里：

render() {
  const { currentPromotionUser } = this.promoption;

  // 如果用户与尚未加入推广计划，则默认展示协议界面
  const children = ((isJoined) => {
    /**
    * isJoined是bool值，isJoined===true时，显示home页面，isJoined===false时，显示agreement页面。
    * isJoined==null，是为了在即将渲染一个页面前，先渲染一个空页面，目的是不让上一个浏览的页面在当前页面刷新时出现闪现的过程。
    */
    if (isJoined == null) {
      return null;
    } else if (isJoined === true) {
      return this.props.children;
    } else {
      return <Agreement/>
    }
  })(_.get(currentPromotionUser, ‘isJoined‘, null));

  return (
    <div className="page-group">
      {children}
    </div>
  )
}


其实我个人更感觉if (isJoined == null) {return null;}这句代码，是做了一个假的数据清除，哈哈哈哈，因为它只是先渲染了一个空页面来遮挡着上一个被浏览过的页面