animation - 制作页面过渡动画

Question

我最近注意到互联网上的一些页面（如 Gizmodo 和 io9）有页面加载动画。在后一种情况下，前一页显示为灰色，中间有一个小的加载“微调器”动画，而第二个页面进入时中间没有空白加载页面，就像互联网上的大多数页面一样。这是怎么做到的？

Answer 1

希望这对您有用...尽管需要 jQuery，但以下解决方案对我有用：

首先在body标签之后添加：

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

然后将 div 和图像的样式类添加到您的 css 中：

#loading {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

最后将此javascript添加到您的页面（最好在页面末尾，当然在关闭body标签之前）：

<script language="javascript" type="text/javascript">   
$(window).load(function() {
$('#loading').hide();   }); 
</script>

然后通过样式类调整加载图片的位置和加载div的背景颜色。

就是这样，工作得很好。但当然你必须在某个地方有一个 ajax-loader.gif。

试试AJAXLoad他们有一些很棒的 GIF 动画.. :)

Answer 2

我没有看过引用的网站，但它听起来像是一个 jQuery 候选人。

您使用 ajax 调用来获取页面的内容，然后将其加载到当前 DOM 中，以替换当前显示的内容。

jQuery 框架有动画和插件来显示你描述的行为。我喜欢的一个是 ColorBox (http://www.jacklmoore.com/colorbox)。