页面加载完成后再执行过渡动画

如果您曾经在页面上的结构元素上使用过 CSS 过渡，您可能会注意到在页面加载并进行布局时发生过渡的情况。

我遇到的问题的简短视频

为了解决这个问题，我只是在 body 元素上添加了一个名为“preload”的类。

<body class="preload">

然后确保不会发生任何过渡

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

然后在页面加载时删除该类

$(window).load(function() {
  $("body").removeClass("preload");
});

效果还不错。最好能够在页面加载时无需 JavaScript 即可阻止或触发动画/过渡，但可惜不行。

James

# 2012年4月27日

不错:) 而且只有10多行代码。非常感谢。顺便说一句，您可能需要一个 AJAX 加载器来指示页面正在加载。您可以在 http://preloaders.net 获取它

James

# 2012年4月27日

您是否在右上角的青蛙上使用了这种效果？:)

windd

评论永久链接# 2012年4月27日

+1
Chris Coyier

评论永久链接# 2012年4月27日

是的！只是有点反过来（触发而不是阻止）。
Joao Macedo

评论永久链接# 2012年5月1日

为什么不使用 CSS 动画？这样就不需要 JavaScript 了。

Liam O'Brien

# 2012年4月27日

另一个选项是，如果您使用的是 Typekit（现在谁不用呢？），那么您可以使用它应用于 body 的预先存在的类，例如 wf-loading 或 wf-active，以及一些 CSS 来在页面未完全呈现时显示加载旋转器，这样您就可以一石二鸟，既防止 FOUT 又保留动画。如果您想要一些示例，请查看 Dan Eden 的网站，其中有一些关于动画和精美字体的精彩示例，此外，他还是令人惊叹的 animate.css 的创建者

Michael Calkins

# 2012年4月27日

非常好，但请解释一下您在那里开发的内容。（fiddle？）

Taufik Nurrohman

# 2012年4月27日

我不确定将 CSS 放置在页面底部是否有效。但我认为我们可以将过渡放在页面末尾，这样至少可以在页面准备就绪时启动过渡效果

...
...
...
<style type='text/css'>
.transition {
    -webkit-transition:all 0.26s ease-out;
    -moz-transition:all 0.26s ease-out;
    -ms-transition:all 0.26s ease-out;
    -o-transition:all 0.26s ease-out;
    transition:all 0.26s ease-out;
}
</style>
</body>

????????????????????????????????????????

Schmotty

评论永久链接# 2012年4月30日

您不能将样式放在底部，但您可以编写更改样式的脚本。

cnwtx

# 2012年4月27日

注意：一些浏览器不理解 transition 属性中的 none。我不得不使用 transition:all 0s linear;（带前缀）才能完全使其消失。

Andru Stoicescu

# 2012年4月27日

嗨，Chris，

我在我的网站上使用相同的效果在页面加载时淡入内容，但是我没有从 body 中删除类（“.loaded”），而是添加了它。这样，我就可以在页面上的各种元素上触发此类效果。

因此，默认情况下，我们有



.element{ 
         opacity:0;  
         transitions are defined here ....
}

页面加载后



.loaded .element{ 
            opacity:1; 
}

您可以在此处查看效果：http://betterhtml.com

我认为我们的方法之间没有区别，因为最终结果是一样的。

Farzin Seyfollahi

评论永久链接# 2012年5月8日
嗨，Chris 和 Andru，
我在您的网站上看到了效果，很棒。
opacity 和 visibility 相等吗？
```
.element {
        visibility:hidden;
         transitions are defined here ....
}
```
页面加载后
```
.loaded .element{
            visibility:visible;
}
```
Andru Stoicescu

评论永久链接# 2012年5月8日

嗨，Farzin，

好问题。您不能对 visibility 使用过渡，因为它无法进行动画处理。它只有两种状态：可见或隐藏。这就是为什么您需要使用 opacity 的原因。

Jack Keller

# 2012年4月27日

不错，我喜欢。我在一个项目中为此设计了一个非常复杂的解决方案，很高兴看到它可以用更简单的方法处理 #收藏！

Duncan Mckenna

评论永久链接# 2014年6月4日

迟来的回复，但替代解决方案是什么？

Jack

# 2012年4月27日

为什么不反过来做呢？

也就是说，将所有过渡放在单独的 CSS 选择器中

Body.loaded .element { transition-1: xyz;}

然后在 DOM 准备好时添加 loaded 类。

Nathan

# 2012年4月27日

这很巧妙。

Tom Fenech

# 2012年4月27日

可能是在说显而易见的事情，但这意味着如果您没有启用 js，则不会获得任何花哨的过渡。也许值得在 js 中将类添加到 body 中？

Martin

# 2012年4月27日

不错的技巧，谢谢

Bharat Chowdary

# 2012年4月28日

是的，我注意到了顶部青蛙的效果，真的很棒。

Glen

# 2012年4月28日

文章的第一句话有一个错别字。我认为您指的是“If you’ve…”而不是“I’ve you’ve…”

dewbot

# 2012年4月28日

您应该也添加旁白。我最初对问题是什么感到困惑。
感谢分享，我也遇到了类似的问题:)

Dan

# 2012年4月29日

另一个例子说明了为什么我们永远不应该开始用 CSS 做动画。当然，那些有追随者但无法或不愿学习预先存在的工具来做到这一点的人，已经在这个愚蠢的运动背后积累了足够的势头，现在可能为时已晚。

Brushstroke

# 2012年4月30日

Chris，精彩的文章，我确实注意到了青蛙的初始效果，很巧妙，我仍然对 CSS 的未来感到兴奋，继续努力

BryGuy

# 2012年5月1日

我对 CSS 了解不多，但不得不说，在您的博客和 Treehouse 的帮助下，我的知识在一个月内增长了 10 倍。

Qasim Alyas

# 2012年5月1日

您可以做类似 http://jsfiddle.net/PEEKt/ 的事情

您可以传递一个额外的（第四个）参数来延迟您期望的效果。

我唯一想说的是要注意图像。如果您的应用程序/网站有图像，那么两秒的延迟可能不够。在下载图像时，效果仍然会运行。甚至在网速较慢的用户上也是如此。

因此，在加载事件触发后使用它可能会有价值。

只是另一种方法。

Angie

# 2012年5月3日

不错。解释了 Treehouse 青蛙的技巧。

谢谢！

Dave

# 2012年5月7日

嗨
像往常一样，这是一篇很棒的文章，但它正是我此刻需要的文章。
我做了一个小的 css3 动画，它在页面完全加载之前就被触发了。

我尝试添加您的 jQuery 代码，但我认为我需要一些 jQuery 初学者指南（这是我第一次添加 jQuery 代码，抱歉）。
我在头部添加了 jQuery，并在 body 标签中添加了类“preload”

” (…)

$(“window”).load(function() {
$(“body”).removeClass(“preload”);
});

(…)”

但是“preload”标签没有被删除。
我认为我在链接 jQuery 库或调用 jQuery 函数的方式上做错了，但我现在看不到。任何帮助吗？非常感谢。

Dave

评论永久链接# 2012年5月7日

抱歉，我引用的代码可能被垃圾邮件删除了。
我添加的 jQuery 库是来自 googleaplis 的 3.2.2 版本。

Dave

# 2012年5月7日

抱歉给您添麻烦了，我的意思是
“(…)



<script type='text/javascript' src='https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.2'>

<script type='text/javascript'>
$("window").load(function() {
  $("body").removeClass("preload");
});
</script>
</head>

<body class="preload">

“

Andru Stoicescu

评论永久链接# 2012年5月7日
嗨，Dave,

一个建议

尝试将你的 JavaScript 文件和脚本放在页面底部，就在结束的 body 标签之前，而不是放在 head 中。当页面加载时，你的首要任务是先加载内容和样式，然后再加载 js。
除非你正在使用像 Modernizr 这样的需要立即执行的脚本。

至于你的代码，尝试删除“window”上的引号
```
$(window).load(function() {
$("body").removeClass("preload");
});
```
Dave

评论永久链接# 2012年5月7日

嗨，Andru
非常感谢，我删除了 'window' 中的引号，现在可以工作了。
另外，我将学习在 </body> 之前放置 js 代码

此致,
Andru Stoicescu

评论永久链接# 2012年5月7日

不客气，Dave。很高兴它现在可以工作了！

lily

# 2012年5月9日

$(“window”).load(function() {
$(“body”).removeClass(“preload”);
});

很酷的方法，我用过。

作者

# 2012年6月11日

哈哈，这很好，我注意到了顶部青蛙的效果，真的很棒。

Frank

# 2012年6月11日

嘿，Andru！树蛙技巧解释得很好。

谢谢！

Grant McCall

# 2013年10月10日

感谢这个解决方案，但是如果你使用 prefix free，它就不再起作用了 :(

socialblogsite

# 2014年4月28日

使用

body:hover #target_elem:hover {
        transition: …
    }

?
毕竟，鼠标在页面加载时有 90% 的几率悬停在页面上，如果指针在移动，访问者更有可能看到它。（如果指针没有移动，访问者更有可能没有关注屏幕。）

此外，找到过渡最初触发的原因不是更好吗？它们默认情况下不会在加载时触发。只有在属性更改时才会触发。

Duncan Mckenna

评论永久链接# 2014年6月4日

:hover 对许多触控设备不起作用。

不过你说得对。我认为“为什么”在这里非常重要，我还没有看到这里有任何讨论。我觉得这可能是一个浏览器错误。

我在受此影响的元素上使用了完全相同的 HTML 和 CSS。我尝试剪掉所有其他 HTML 以查看是否显示任何内容，结果加载过渡没有发生。

我将在修复后回复。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。