你如何让一个 html 页面淡出而另一个淡入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2596862/
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
How do you make an html page fade out while another fades in?
提问by Behrooz Karjoo
I have a client with an event planning site asking his pages to fade into one another. I have no idea how I can accomplish this. Any ideas? Is there anyway to do this without flash?
我有一个客户，有一个活动策划网站，要求他的页面相互融合。我不知道如何才能做到这一点。有任何想法吗？有没有办法在没有闪光灯的情况下做到这一点？
采纳答案by Mathew
Definitely get hold of a javascript framework. jQuery is popular (because it's ace), but there's Mootools, Prototype, and Dojo to name a few.
一定要掌握一个 javascript 框架。jQuery 很流行（因为它是王牌），但还有 Mootools、Prototype 和 Dojo 等等。
I'm not sure if crosssfading can be done reliably across all the browsers without popping / jumping artifacts. Even the example Dancrumb points to is a bit ropey (no insult intended Dan).
我不确定是否可以在所有浏览器中可靠地完成交叉淡入淡出而不会弹出/跳跃工件。甚至 Dancrumb 所指的例子也有点笨拙（无意侮辱 Dan）。
Process-wise, you could have 3 layers (top to bottom)
过程方面，你可以有 3 层（从上到下）
- screen (initially invisible)
- page (one)
- container (initially empty)
- 屏幕（最初不可见）
- 页（一）
- 容器（最初是空的）
when the user tries to navigate to the second page, load it into the container using ajax. Once the page has loaded, start fading up the screen. Once the screen is at 100% opacity, manipulate the DOM to move the loaded content out of the hidden container and into what is now page two, then start fading the screen back out again.
当用户尝试导航到第二页时，使用 ajax 将其加载到容器中。页面加载完毕后，开始淡出屏幕。一旦屏幕达到 100% 不透明度，操纵 DOM 将加载的内容移出隐藏容器并进入现在的第二页，然后再次开始淡出屏幕。
EDITon a sidenote - I would summon up all my webdev mojo and try to convince the client what I bad idea it is to have complete page fades on an site designed to communicate information. Obviously I know sweet FA about this project so feel free to slap me down; but I've never seen a case where fancy effects and transitions has improved the usability of a site when used at the page level. I know it'd irritate me if I had to wait for a fancy transition to finish before I could continue navigating...
编辑旁注 - 我会召集我所有的 webdev mojo 并试图说服客户我的坏主意是在一个旨在传达信息的网站上有完整的页面淡入淡出。显然，我知道这个项目的甜蜜 FA，所以请随意打我一巴掌；但我从未见过在页面级别使用花哨的效果和过渡提高了网站的可用性的情况。我知道如果我必须等待一个奇特的过渡完成才能继续导航，那会让我很恼火......
回答by Dancrumb
Page Transitions are supported natively with IE, using the METAtag.
See the Microsoft page about Filters and Transitionsfor more
使用META标签，IE 原生支持页面转换。请参阅有关滤镜和转微软网页更多
For a browser agnostic approach (using Javascript), see this Stack Overflow question
对于浏览器不可知的方法（使用 Javascript），请参阅此堆栈溢出问题
回答by Alex Lawford
This should work, without relying on Ajax (jQuery) :
这应该可以工作，而无需依赖 Ajax (jQuery)：
$(function(){
/*
Add this code to every page.
We start by hiding the body, and then fading it in.
*/
$('body').hide().fadeIn('fast');
/*
Now we deal with all 'a' tags...
*/
$('a').click(function(){
/*
Get the url from this anchors href
*/
var link = $(this).attr('href');
/*
Fade out the whole page
*/
$('body').fadeOut('fast', function(){
/*
When that's done (on the 'callback') send the browser to the link.
*/
window.location.href = link;
});
return false;
});
});
Worth noting however is that if you're loading js at the bottom of the page (as we're often told to do), on a slow page load the page might be visible, then invisible, and then fade in again... Which would look very strange.
然而，值得注意的是，如果您在页面底部加载 js（正如我们经常被告知要做的那样），在缓慢的页面加载时，页面可能是可见的，然后是不可见的，然后再次淡入......这看起来很奇怪。
A solution would be to just hide the body in CSS, but you might, possibly, have visitors with JS turned off but CSS turned on, then they'll just have a blank page. Alternatively you could use a tiny amount of js at the top of the page (not relying on jQuery) to hide the body.
一个解决方案是将主体隐藏在 CSS 中，但您可能会关闭 JS 的访问者但打开 CSS，然后他们只会有一个空白页面。或者，您可以在页面顶部使用少量 js（不依赖于 jQuery）来隐藏正文。
Lastly, however, why? I think if I visited your site these effects would begin to seriously annoy me pretty quickly. Why not just take the user to the page they asked for?
然而，最后，为什么？我想如果我访问了你的网站，这些影响很快就会让我很恼火。为什么不直接将用户带到他们要求的页面？
回答by Azeem.Butt
Won't work in IE, but WebKit and FireFox are both on the boat with CSS transitions, and they run a lot more smoothly than any JavaScript.
不能在 IE 中工作，但 WebKit 和 FireFox 都在使用 CSS 转换的船上，并且它们的运行比任何 JavaScript 都要流畅得多。
回答by Joseph Mastey
You could load the content using an AJAX request and then use javascript to fade out one page and fade in the other? In jQuery, something along the lines of:
您可以使用 AJAX 请求加载内容，然后使用 javascript 淡出一个页面并淡入另一个页面？在 jQuery 中，类似以下内容：
$.get('newpage.html', {}, function(res){
$('#content-container').fadeOut().html(res).fadeIn();
});
Not perfect, but it's a move in the right direction hopefully? This isn't really something HTML was made for...
不完美，但希望这是朝着正确方向迈出的一步？这并不是 HTML 的真正目的...
Thanks, Joe
谢谢，乔
回答by pixeltocode
try this jQuery plugin. it's a tutorial on page transitions
回答by Kris J
This might be a little late, but to Fade a page In when it loads, and then fade out On-click I'd suggest using jQuery. I wrote this quick little script that will do the trick that your after. Have a look at it, and I will explain below.
这可能有点晚了，但是要在加载时淡入页面，然后在单击时淡出我建议使用 jQuery。我写了这个快速的小脚本，它将完成你所追求的技巧。看看它，我将在下面解释。
The CSS
CSS
body { display:none; }
The JS
JS
$(document).ready(function()
{
$( 'body' ).fadeIn("slow", 0.0);
$( 'body' ).fadeIn("slow", 0.1);
$( 'body' ).fadeIn("slow", 0.2);
$( 'body' ).fadeIn("slow", 0.3);
$( 'body' ).fadeIn("slow", 0.4);
$( 'body' ).fadeIn("slow", 0.5);
$( 'body' ).fadeIn("slow", 0.6);
$( 'body' ).fadeIn("slow", 0.7);
$( 'body' ).fadeIn("slow", 0.8);
$( 'body' ).fadeIn("slow", 0.9);
$( 'body' ).fadeIn("slow", 1.0);
$('a').click(function(){
$('body').fadeOut();
setTimeout("nav('"+this.href+"')",1000);
return false;
});
});
function nav(href){
location.href=href;
};
The CSS holds back the display of the body, which allows the JS to start the fade effect on-load of the page. The body fadeIn is set at intervals to allow a smoother fadeIn effect, giving the site time to load. I've set the fadeOut effect to trigger when any anchor link is clicked (you could change it whatever you wish to act as the fade out trigger). When the page fades out, it will most likly fade to a 'White' screen. To avoid this, set your HTML background color to any HEX to match the sites color.
CSS 阻止了 body 的显示，这允许 JS 在页面加载时启动淡入淡出效果。身体的淡入是间隔设置的，以允许更平滑的淡入效果，给站点加载时间。我已经将淡出效果设置为在单击任何锚链接时触发（您可以根据自己的意愿更改它作为淡出触发器）。当页面淡出时，它最有可能淡入“白色”屏幕。为避免这种情况，请将 HTML 背景颜色设置为任何 HEX 以匹配站点颜色。
That script right there is probably the best solution and quickest to impliment on any site. It's been tested on IE7-8, FF 3+ and Opera 9-10 and works like a charm. Enjoy!
那个脚本可能是最好的解决方案，并且在任何网站上都能最快地实现。它已经在 IE7-8、FF 3+ 和 Opera 9-10 上进行了测试，效果很好。享受！
回答by Mr. Boy
What happens with pages that contain Flash/Video elements or other complex stuff? Will those fade properly?
包含 Flash/Video 元素或其他复杂内容的页面会发生什么？那些会适当地褪色吗？
回答by nickf
Here's a hacky way I just thought of. Similar to Alex Lawford's answer, but hopefully a bit better:
这是我刚刚想到的一种hacky方式。类似于 Alex Lawford 的回答，但希望更好一点：
On clicking a link, send an AJAX request for the new page, but don't do anything with the response. Once you receive the response, then fade out the current page, issue a standard window.location = <newurl>command and have javascript on that side immediately hide and then fade in the new document.
单击链接时，为新页面发送 AJAX 请求，但不要对响应执行任何操作。收到响应后，淡出当前页面，发出标准window.location = <newurl>命令并在该侧立即隐藏 javascript，然后淡入新文档。
The hope here is that the response from the AJAX call is cached, so the time between fade out and fade in will be negligible.
这里希望来自 AJAX 调用的响应被缓存，因此淡出和淡入之间的时间可以忽略不计。
I'll just reiterate from the first sentence though: this is hacky.
不过，我只是从第一句话重申：这是hacky。
