javascript - 如何通过优雅降级淡入内容

Question

我正在与一个团队合作，该团队大量使用“淡入”效果来动画化图像的渲染，有时甚至是文本。

您可以看到我在这里描述的那种效果:http://www.seafireresidencescayman.com/seven-mile-beach

淡入不是真正的“我的事”，但实际上最让我困扰的是，到目前为止我看到的所有实现，在未启用 javascript 时会使网站变得毫无用处。

下面是上面相同站点在没有 javascript 时的样子:

我的团队为此首选的工具是 AOS ，它使用或多或少与我在其他地方看到的相同的方法:

1. 用CSS隐藏指定内容
2. 使用 javascript 以一种时髦的方式展示它

如果 javascript 不可用，#2 不会发生并且内容保持隐藏状态。不好。

我有兴趣找到一种方法来实现相同/相似的效果，但如果 javascript 不可用，该方法会优雅地失败。我猜棘手的部分是防止内容最初闪烁，这就是为什么大多数方法需要“默认”隐藏内容的原因。所以也许它并不像使用 javascript 而不是 CSS 隐藏东西那么简单...

有没有一种非邪恶的方法可以做到这一点？

Answer 1

我同意@RobG 的评论，实现这一点的唯一渐进增强方式是不使用 CSS 隐藏内容，而是使用 JS 隐藏它。这可以在没有 jQuery 的情况下轻松完成，但为了简洁起见......

<h1 class="fade-in">Yay, it's 2002!</h1>
<div>
   <img class="fade-in" src="/path/to/cat.gif" />
</div>

<script>
var $faded = $('.fade-in');
$faded.hide();
// could easily use a more intelligent mechanism for determining when to load
$('img.fade-in').on('load', function() {
   $faded.fadeIn();
});
</script>