如何淡化优雅降级的内容

Question

我和一个大量使用＆＃34;淡入＆＃34;的团队合作。影响动画渲染图像，有时甚至文本。

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

淡入不是真的＆＃34;我的事情＆＃34;，但最让我烦恼的是，到目前为止我所见过的所有实现都会让网站变得毫无用处javascript未启用。

以下是没有javascript的上述相同网站的内容：

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

1. 使用CSS隐藏指定的内容
2. 使用javascript
以爵士的方式显示它

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

我有兴趣找到一种方法来实现相同/类似的效果，但是如果javascript不可用，则会以优雅的方式失败。我猜测棘手的部分是保持内容最初不闪烁，这就是为什么大多数方法都需要隐藏内容＆＃34;默认情况下。＆＃34;所以也许它不像用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>