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

Question

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

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

淡入并不是真正的 "my thing"，但实际上最让我困扰的是，到目前为止我所看到的所有实现都使网站在 javascript 时变得毫无用处'已启用。

上面的相同站点在没有 javascript 的情况下是这样的：

我的团队为此首选的工具是 AOS，它使用的方法与我在其他地方看到的大致相同：

用CSS隐藏指定内容
使用 javascript

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

我有兴趣找到一种方法来实现 same/similar 效果，但如果 javascript 不可用，则该方法会优雅地失败。我猜棘手的部分是防止内容最初闪烁，这就是为什么大多数方法需要隐藏内容 "by default." 所以也许它不像用 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>

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

How to fade-in content with graceful degradation

javascript

css

accessibility

progressive-enhancement

graceful-degradation