如何在页面之间进行转换[关闭]

Question

谁能帮帮我，看看这个website，请告诉我，当您单击某些菜单栏时，使用什么功能进行漂亮的过渡，它可以顺利进入另一个页面而不会加载白屏。

如果你知道，请告诉我，它是什么，或者我该怎么做，或者两者兼而有之：D 请在下面给我答案。非常感谢。

Answer 1

如果您查看页面的源代码，您会发现所有需要的页面都已加载到 DOM 中。 （我猜是一页结构，或者可能是异步加载）。

但是，所有页面都有自己的 DIV 容器，这些容器链接到导航栏。 单击每个导航元素时，对首选 DIV 进行转换。

您可以选择淡入淡出效果（在您向我们展示的页面上使用），甚至可以选择其他一些很酷的弹跳效果，或者即使您知道如何使用 jQuery 操作 CSS，也可以选择您自己的动画/过渡.这是 jQuery API fadeIn 和 fadeOut 的链接 .

我会这样做：

$(function(){
  // Setup your Variables first
  var nav = $('.navigation ul li');
  var all_pages = $('.pages .page');
  var active = 'active';
  var target, page;
  
  
  // On Click do the stuff to get some transition
  nav.on('click', function(){
    // Get the Target
    target = $(this).attr('data-target');
    page = $('.page[data-page='+target+']');
    
    // Hide all pages here (maybe it would be a better idea to target .page.active)
    all_pages.fadeOut('slow').removeClass(active);

    // FadeIn the target Page
    page.fadeIn('slow').addClass(active);
  
  });
  
  
  // fallback to first page when the target is not set on page load
  if(!target)      nav.first().trigger('click');
});

.main { position:relative; width:100%; height:100%; font-family:'Verdana'; font-size:13px; }

.navigation { border:0px solid red; width:150px; position:absolute; left:0px; top:0px; bottom:0px; }
.navigation ul { list-style:none; width:auto; margin:0px; padding:0px; }
.navigation ul li { display:block; height:30px; border:0px solid green; line-height:30px; white-space:nowrap; cursor:pointer; padding:0px 20px; }

.pages { position:absolute; left:150px; right:0px; top:0px; bottom:0px; border:0px solid blue; }
.page { position:absolute; top:0px; left:0px; right:0px; bottom:0px; display:none; min-height:500px; }

.page.active { }

.page:nth-child(1),
.navigation ul li:nth-child(1) { background:lightgreen; }
.page:nth-child(2),
.navigation ul li:nth-child(2) { background:maroon; }
.page:nth-child(3),
.navigation ul li:nth-child(3) { background:wheat; }
.page:nth-child(4),
.navigation ul li:nth-child(4) { background:cyan; }
.page:nth-child(5),
.navigation ul li:nth-child(5) { background:salmon; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div class='main'>
  <div class='navigation'>
  <ul>
    <li data-target='1'>First Link</li>
    <li data-target='2'>Second Page</li>
    <li data-target='who'>Who I am</li>
    <li data-target='location'>Location</li>
    <li data-target='5'>Oter Stuff</li>
  </ul>
  </div>
  
  <div class='pages'>
    <div class='page' data-page='1'> Here is the first page ... </div>
    <div class='page' data-page='2'> here is the seocnd one</div>
    <div class='page' data-page='who'> Who I am?</div>
    <div class='page' data-page='location'> Location </div>    
    <div class='page' data-page='5'> Oter Stuff </div>
  </div>
</div>

我希望你能得到代码背后的想法来得到你想要的结果:) 顺便说一句，我快速制作了这个 HTML 标记，以获得类似的过渡效果。 您需要为导航添加更多动画内容，以获取“鼠标悬停上滑动名称等”内容 - 使用 CSS 的 :hover 语法很容易完成。

希望这会有所帮助，ps。这是我的第一篇文章，我可能有一些错误。 是的，应该有一个更好的 HTML Buildup，就像我的 Snippet 现在所做的那样。

问候 机甲馆