页面过渡到外部URL的效果

Page Transition Effect to External URL

本文关键字：URL 外部 过渡到      更新时间：2023-09-26

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

我知道你可以通过JQuery移动(http://demos.jquerymobile.com/1.1.0/docs/pages/page-transitions.html)与内部页面做到这一点，但限制是链接必须是ajax的，不能被激活到新的URL。

有谁知道如何做到这一点吗?理想情况下，我想使用"流动"或"滑动"过渡。但是，我会参考您提供的任何示例或参考，并根据我的需要进行调整。

解决方案不一定是jQuery，它可以是javascript, HTML 5, CSS或任何其他可能工作的解决方案。

谢谢,安德鲁~

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

伪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
}
相关文章：