html - 如何使一个 html 页面淡出而另一个淡入?

标签 html css

我有一个事件策划网站的客户要求他的页面相互淡入淡出。我不知道我怎么能做到这一点。有任何想法吗?无论如何,没有闪光灯就可以做到这一点吗?

最佳答案

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

我不确定是否可以在所有浏览器中可靠地完成交叉渐变,而不会出现弹出/跳跃伪像。甚至 Dancrumb 指向的例子也有点粗鲁(没有侮辱 Dan 的意思)。

在流程方面,您可以有 3 层(从上到下)

  • 屏幕(最初不可见)
  • 第(一)页
  • 容器(最初是空的)

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

编辑 在旁注中 - 我会调出我所有的 webdev mojo 并试图说服客户我的坏主意是在一个旨在传达信息的网站上让完整的页面淡入淡出。显然我对这个元素很了解,所以请随意打我一巴掌;但我从未见过花哨的效果和过渡在页面级别使用时提高网站可用性的情况。我知道如果我不得不等待一个花哨的过渡完成才能继续导航,这会激怒我......

关于html - 如何使一个 html 页面淡出而另一个淡入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2596862/

相关文章:

javascript - 使用嵌套级别在 CSS 中交替行颜色

HTML5 GEOLocation 第二个提示

css - Facebook 风格的内容容器

jquery - 基于 JQuery 验证更改 CSS 类

html - 如何将图像并排放置?

css - 边界图像线性渐变为双色调纯色

javascript - 为什么这个图像预加载不起作用?

c# - 即使使用 @import 也捆绑 css

javascript - IE如何在新选项卡中打开blob对象

具有样式 float :left 的 html 元素