CSS+JS实现页面切换过渡

注: 此文章中涉及的部分博客功能已在 RThemeV3 中作出调整，已无参考价值

前言

因为自己最近在忙这个博客的建设，所以自己就想给这个 blog 做一个切换页面时的过渡。可在网上却都没什么符合这 blog 主题的，于是自己动手丰衣足食，自己就做了现在的这种效果。

效果

效果如此 blog 中的切换效果，即： 进入新页面时，除顶栏及底栏外的其余文字部分从屏幕左侧飞入， 离开此页面时，除顶栏及底栏外的其余文字部分从屏幕左侧飞出。

实现方式

考虑到需要有对进入\离开页面的检测，这里需要用到 JavaScript。对样式的调整，我选择了使用 CSS 动画。 这样还有个优点：因为需要让动画结束后元素停留在结束位置，所以先使用动画，将元素从 left:-xxxpx 移动到 left:0px 即可。 而对于离开页面，则需要使用 window.onbeforeunload 参数检测是否离开页面，然后触发动画。 触发动画的方式，这里采用的是通过 JS 改变 HTML 内容的属性 id，配合 CSS 选择器实现。

值得注意的是，因为网络原因可能会导致一个页面的加载时间变长，这时若离开页面的动画播放完毕则会重新回到原位置。 要解决这个问题，最好的办法是在 css 动画属性中加入"animation-fill-mode: forwards;",让动画结束时元素停在结束位置

代码

CSS： Javascript: HTML

文字版

CSS：

.text {
  position: relative;
  animation-name: startloading;
  animation-duration: 1s;
}

@keyframes startloading {
  0% {
    left: -2000px;
  }

  100% {
    left: 0px;
  }
}

.text#active {
  position: relative;
  animation-name: endloading;
  animation-duration: 1s;
  color: #111111;
  animation-fill-mode: forwards;
}

@keyframes endloading {
  0% {
    left: 0px;
  }

  100% {
    left: -2000px;
  }
}

JS：

window.onbeforeunload = function (e) {
  document.getElementById("text").id = "active";
};

HTML：

<div class="text title" id="text">文字内容</div>

评论