jQuery 带有加载图像动画的 html 页面之间的平滑过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16958620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Smooth transition between html pages with a loading image animation
提问by Rahul
This is excatly what I'm looking for: http://hoverstud.io. I'm NOT looking for something like this-> http://bit.ly/11jdunO, which has too many issues and bugs.
这正是我正在寻找的：http://hoverstud.io 。我不是在寻找这样的东西 - > http://bit.ly/11jdunO，它有太多的问题和错误。
Can someone please help me find a tutorial or some links?
有人可以帮我找到教程或一些链接吗？
回答by Brewal
I'm not sure of what you exactly want but you could use such a code :
我不确定你到底想要什么，但你可以使用这样的代码：
$(document).ready(function(){
// to fade in on page load
$("body").css("display", "none");
$("body").fadeIn(400);
// to fade out before redirect
$('a').click(function(e){
redirect = $(this).attr('href');
e.preventDefault();
$('body').fadeOut(400, function(){
document.location.href = redirect
});
});
})
It will fade the entire page. If you want to fade just a part of your page, change bodyby whatever you want.
它会使整个页面褪色。如果您只想淡化页面的一部分，请body根据需要进行更改。
回答by GeReV
I would utilize a few newer and cleaner tools for this. Nowadays you can use CSS transitions to do this.
为此，我会使用一些更新和更清洁的工具。现在你可以使用 CSS 过渡来做到这一点。
Here's a very simple example:
这是一个非常简单的例子：
<html>
<head>
<style>
.container {
opacity: 0;
transition: opacity 1s;
}
.container-loaded {
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<!-- All the content you want to fade-in here. -->
</div>
<script>
$(document).ready(function() {
$('.container').addClass('container-loaded');
});
</script>
</body>
</html>
I'm assuming here that the transition between pages is a full page reload, so the container-loadedclass is gone once the page reloaded.
我在这里假设页面之间的转换是整页重新加载，因此container-loaded一旦页面重新加载，该类就消失了。
But it should be almost trivial to implement this for one-page web apps using any popular framework, Turbolinksor anything like that.
但是，使用任何流行的框架、Turbolinks或任何类似的框架为单页 Web 应用程序实现这一点几乎是微不足道的。
More things to note:
更多注意事项：
- If you want to wait until the page images are loaded as well, you could use
document.onloadinstead of$(document).ready(). - It would be almost as easy to implement without using jQuery, if
document.querySelectorand classListsare available for you.
- 如果您还想等到页面图像加载完毕，您可以使用
document.onload代替$(document).ready(). - 这将是几乎一样容易实现，而无需使用jQuery的，如果
document.querySelector和classLists可供选择。
回答by Nuno Costa
I built something like this.
我建造了这样的东西。
First place a #preloader on the HTML on a div like this
首先像这样在 div 上的 HTML 上放置一个 #preloader
<div id="preloader"></div>
If you want to, you can place a gif inside to.
如果你愿意，你可以在里面放一个gif。
Then setup some CSS:
然后设置一些CSS：
#preloader {
background: #FFF;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 9999;
}
Now make some script like this:
现在制作一些这样的脚本：
$(window).load(function() {
$('#preloader').delay(350).fadeOut('slow');
});
$('a').click(function(e){
e.preventDefault();
t = $(this).attr('href');
$('#preloader').delay(350).fadeIn('slow',function(){
window.location.href = t;
});
});
And you are done :)
你完成了:)
The first part is to make your preloader appear when the window is loading, and then fadeOut.
第一部分是让你的预加载器在窗口加载时出现，然后淡出。
The second is to bind a click on the archor to fadeIn the preloader and redirect to the href of the archor.
第二种是将archor上的点击绑定到fadeIn preloader并重定向到archor的href。
