淡入淡出页面加载栏

我最近看到了这种效果 - 我喜欢它！淡入淡出页面加载栏

虽然它看起来像是一件容易的事情，但我找不到任何能给我找到答案的东西。不过，我确信有人可以纠正我。

基本上，我在一个简单的效果之后，点击一次（内部）导航/页面链接后，页面将淡出并返回到用户指向的页面。

我可以找到一些东西在这个，但我想要的另外一点是在浏览器的顶部有一个加载栏，沿着页面的顶部增长，直到新的页面准备就绪。

我发现效果的几个例子：

第一个可能是比较简单的，优雅的效果后，我。

希望有人能帮到这个。我发现每个示例/教程似乎都有点过于复杂或者添加了疯狂的效果。

来源

2017-02-02 user1406440

您可以使用动画模板。您CAND在这里找到一个http://git.blivesta.com/animsition/“演示”和“下载链接。

来源

2017-02-02 12:09:59 Maybe

这看起来不错。我之前发现了一些类似的东西，但我总是继续前进，因为它没有加载栏。我不确定可以操纵它来做类似的事情吗？ – user1406440

当然你可以假装那个加载栏。只需使用w3schools中的这些示例即可。链接：http：//www.w3schools.com/howto/howto_js_progressbar.asp – Maybe

不管加载时间如何，这不会增加宽度吗？只是在想，所以它没有达到100％，然后页面仍在加载？ – user1406440

纠正我，如果我在错误的方式是，

在链接点击事件，连接将使用默认阻止功能的JavaScript函数，这将停止重定向过程，淡出你的身体元素，然后手动触发window.location。

默认情况下，为每个页面添加一个不透明度为0，并在body标签上附加一个事件“on loading loaded you will manually set your不透明度为1，时尚功能为fadin。

这只是原则打电话给我，如果你有兴趣在实际的JavaScript代码

好运

来源

2017-02-02 12:15:22

嘿，这听起来很有趣。如果我是诚实的，我对此并不了解，所以我认为我会在这里发布一些信息。我真的不确定'最佳实践'会在这里......但我想可能没有一个！最好的做法可能是'不要这样做'哈哈！但有时，当你试图炫耀/提出很好的效果，我认为没关系。 – user1406440

我想我会用我的解决方案在柜面更新这个就派上用场了别人。

我决定使用pace.js插件，这对加载小节非常有用。一旦页面加载完成，它还会向.pace-done的正文元素添加一个类。 Pace会自动将几个div添加到您的页面顶部，您可以将其设置为进度条。

因此，基本上我在我的内容上设置了一个值opacity: 0;，这个值包含在.page div中。直到页面被加载，当我设置opacity: 1;与淡入内容的过渡。还有一个后备，如果JavaScript没有加载，我们会覆盖样式，以便内容始终可见并且永不透明。

这里是CSS，我会包括我的步伐。JS加载的直板造型，以及：

/** 
* When pace.js is running we add `opacity` to the `body` element so we can fade 
* the page in with a transition once it's loaded. 
*/ 

.page { 
    opacity: 0; 

    .pace-done & { 
     opacity: 1; 
     transition: opacity .5s ease; 
    } 

    .no-js & { 
     opacity: 1 !important; 
    } 
} 


/** 
* Progress bar styles. 
*/ 

.pace { 
    pointer-events: none; 
    user-select: none; 
} 

.pace-inactive { 
    display: none; 
} 

.pace .pace-progress { 
    background: $color-primary; 
    height: 4px; 
    position: fixed; 
    top: 0; 
    right: 100%; 
    width: 100%; 
    z-index: 2000; 
}

这所有的一切是一个不错的效果确实很好。这不是非常重要，但我认为在重定向之前我会略微淡化页面，但我需要为此使用JavaScript。这里是我使用的代码：

$(document).ready(function() { 

    //$('body').css('display', 'none'); 
    //$('body').fadeIn(200); 

    $('a:not(.page-head__toggle)').click(function() { 
     event.preventDefault(); 
     newLocation = this.href; 
     $('body').fadeOut(150, newpage); 
    }); 

    function newpage() { 
     window.location = newLocation; 
    } 
});

这不是针对页面上的每个链接，除了我的导航菜单切换。所以，如果你有1000个链接，那也许不是很好。您始终可以指定一个类，并且只添加与该类相关的目标链接。

希望这可以帮助别人！ :)

来源

2017-02-10 10:50:40 user1406440

淡入淡出页面加载栏

回答

相关问题