【问题标题】:How do you make an html page fade out while another fades in?如何让一个 html 页面淡出而另一个淡入?
【发布时间】:2010-07-25 07:56:14
【问题描述】:

我有一个客户,他的活动策划网站要求他的页面相互淡入淡出。我不知道我怎么能做到这一点。有任何想法吗?有没有办法在没有 Flash 的情况下做到这一点?

【问题讨论】:

  • 淡入淡出的过渡页面在我看来总是一种“Web UI 气味”。
  • 我原则上不同意这是一个错误的想法,但是当页面加载需要几秒钟时,这在实践中将如何工作?通常页面会随着每个图像/部分的接收而递增加载,您是否必须等待整个页面(包括 Flash 元素)在开始淡入淡出之前加载?
  • @John - Ajax 可以解决这个问题。在页面加载时显示一个小加载 gif -> 淡入/淡出。

标签: html css


【解决方案1】:

一定要掌握一个 javascript 框架。 jQuery 很流行(因为它是王牌),但还有 Mootools、Prototype 和 Dojo 等等。

我不确定是否可以在所有浏览器上可靠地完成交叉淡化,而不会弹出/跳转工件。即使是 Dancrumb 所指的例子也有点啰嗦(没有侮辱 Dan 的意思)。

就流程而言,您可以有 3 层(从上到下)

  • 屏幕(最初不可见)
  • 页面(一)
  • 容器(最初为空)

当用户尝试导航到第二个页面时,使用 ajax 将其加载到容器中。页面加载后,开始淡化屏幕。屏幕达到 100% 不透明度后,操纵 DOM 将加载的内容移出隐藏容器并进入现在的第二页,然后再次开始淡出屏幕。

EDIT 在旁注中 - 我会调出我所有的 webdev mojo 并尝试让客户相信我的坏主意是在一个旨在传达信息的网站上拥有完整的页面淡入淡出。显然我知道这个项目的甜蜜FA,所以请随意打我;但我从未见过这样的案例,即在页面级别使用时,花哨的效果和过渡可以提高网站的可用性。我知道如果我必须等待花哨的过渡完成才能继续导航,这会让我很恼火......

【讨论】:

  • 如果它是一个快速的效果,比如 0.5 秒,那么我不同意... Windows 有很好的动画菜单和 minimize.maximize 功能,MacOS 也有(事实上更是如此)。
  • 打开菜单和最小/最大屏幕显示与浏览页面完全不同......,
  • 提高可用性可以包括纯装饰效果。我认为,虽然长时间的转换,或网站每个页面上的转换,可能会让人讨厌,但从主页到更深区域的单一转换可以增加一种润色感。这仅取决于设计。用户可能不会因 0.5 秒的过渡而感到不便,因为他们甚至没有时间在该时间范围内扫描新页面,更不用说等待过渡完成才能点击某些东西了。跨度>
【解决方案2】:

IE 原生支持页面转换,使用 META 标签。 请参阅Microsoft page about Filters and Transitions 了解更多信息

对于与浏览器无关的方法(使用 Javascript),请参阅 this Stack Overflow question

【讨论】:

  • 注意:过滤器和转换从 IE9 开始被弃用。
【解决方案3】:

这应该可以工作,而不依赖于 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;
    });

});

然而值得注意的是,如果您在页面底部加载 js(正如我们经常被告知的那样),在页面加载速度较慢时,页面可能可见,然后不可见,然后再次淡入...这看起来很奇怪。

一种解决方案是在 CSS 中隐藏正文,但您可能会关闭 JS 但打开 CSS 的访问者,然后他们将只有一个空白页面。或者,您可以在页面顶部使用少量 js(不依赖 jQuery)来隐藏正文。

最后,为什么?我想如果我访问你的网站,这些影响很快就会让我非常恼火。为什么不直接将用户带到他们要求的页面?

【讨论】:

    【解决方案4】:

    在 IE 中无法运行,但 WebKit 和 FireFox 都在使用 CSS 转换,而且它们运行起来比任何 JavaScript 都流畅得多。

    http://www.w3.org/TR/css3-transitions/

    【讨论】:

    • 自 IE4 以来,IE 就有了类似 powerpoint 的页面转换。我不知道他们现在是否已经把它们拉出来了……
    • ...另外,CSS 过渡是两个 CSS 值之间的过渡,而不是两个不同的页面。
    【解决方案5】:

    这可能有点晚了,但是在加载时淡入页面,然后在单击时淡出我建议使用 jQuery。我写了这个快速的小脚本,它将完成你所追求的技巧。看看吧,我会在下面解释。

    CSS

     body { display:none; } 
    

    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;
    };
    

    CSS 阻止了 body 的显示,这允许 JS 在页面加载时启动淡入淡出效果。主体的淡入淡出设置为间隔设置,以允许更平滑的淡入淡出效果,给网站加载时间。我已将淡出效果设置为在单击任何锚链接时触发(您可以将其更改为您希望充当淡出触发器的任何内容)。当页面淡出时,它很可能会淡出为“白色”屏幕。为避免这种情况,请将您的 HTML 背景颜色设置为任何 HEX 以匹配网站颜色。

    该脚本可能是最好的解决方案,并且可以最快地在任何网站上实施。它已经在 IE7-8、FF 3+​​ 和 Opera 9-10 上进行了测试,效果非常好。享受吧!

    【讨论】:

    • 如果用户禁用了 JS,您可能需要在其中设置取消隐藏正文的 noscript 部分。
    • 或者只通过 jQuery 应用你的 CSS 显示 none $('body').css('display', 'none');
    【解决方案6】:

    您可以使用 AJAX 请求加载内容,然后使用 javascript 淡出一个页面并淡入另一个页面?在 jQuery 中,类似于:

    $.get('newpage.html', {}, function(res){
        $('#content-container').fadeOut().html(res).fadeIn();
    });
    

    并不完美,但希望这是朝着正确方向迈出的一步?这并不是 HTML 的真正用途......

    谢谢, 乔

    【讨论】:

      【解决方案7】:

      试试这个 jQuery 插件。这是tutorial on page transitions

      【讨论】:

        【解决方案8】:

        包含 Flash/视频元素或其他复杂内容的页面会发生什么情况?那些会正常褪色吗?

        【讨论】:

          【解决方案9】:

          这是我刚刚想到的一种 hacky 方式。类似于 Alex Lawford 的回答,但希望更好一点:

          点击链接时,发送一个新页面的 AJAX 请求,但不要对响应做任何事情。收到响应后,淡出当前页面,发出标准的window.location = <newurl> 命令并让该侧的javascript 立即隐藏,然后淡入新文档。

          这里希望来自 AJAX 调用的响应被缓存,因此淡出和淡入之间的时间可以忽略不计。

          我只是重申第一句话:这是hacky

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2012-01-25
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2012-10-29
            相关资源
            最近更新 更多