页面过渡效果到外部 URL答案

【问题标题】：Page Transition Effect to External URL页面过渡效果到外部 URL
【发布时间】：2014-06-04 15:41:28
【问题描述】：

我有两个彼此密切相关的域。因此，我在页面的右上角放置了一个固定框，以便用户可以在两个站点之间快速跳转。但是，我想为此操作添加页面转换，以便当用户单击框中的链接时，站点将优雅地转换到新 URL。

我知道您可以通过 JQuery Mobile (http://demos.jquerymobile.com/1.1.0/docs/pages/page-transitions.html) 对内部页面执行此操作，但限制是链接必须是 ajax，并且不能激活到新 URL。

有谁知道如何做到这一点？理想情况下，我想使用“Flow”或“Slide”过渡。但是，我将采用您可以提供的任何示例或参考资料，并根据我的需要进行调整。

解决方案不一定非要 jQuery，它可以是 javascript、HTML 5、CSS 或任何其他可行的解决方案。

谢谢，〜安德鲁

【问题讨论】：

标签： javascript jquery html transition transitions

【解决方案1】：

对我来说，它会像这样工作：

伪 HTML：

<body>
   <div id="page1"> <!-- Content goes here --> </div>
</body>

伪 JQuery：

on AJAX complete {
   var newID
   var oldID
   if ($('#page1').length) { // Work out old and new ID's
      newID = 'page2'
      oldID = 'page1'
   } else {
      newID = 'page1'
      oldID = 'page2'
   }
   $('body').append('<div id="' + newID +'" style="display:none;">' + DataFromAjaxCall + '</div>') // Append the body with a hidden div containing new content
   $('#' + oldID).fadeOut(400, function() { // Fade the old one out and then remove it
      $(this).remove();
   });
   $('#' + newID).fadeIn(400); // Fade the new one in
}

【讨论】：