Javascript 如果以sessionStorage结束会话，如何在会话之前保持动画的状态？

让我解释一下我想要实现的目标

我只想在用户会话期间显示一次动画。只有当用户退出浏览器并返回网站时，动画才能开始

如果此人刷新或在其他选项卡中打开url，动画将不会再次启动

所以，动画非常简单，我有一个两个容器，占据了视口的全部高度

第一个在2秒后淡出，并让第二个容器的位置

目标是在用户的整个访问过程中保持最终状态

原因是不要多次显示动画，这样体验就不会变得烦人

这里是html和css

正文{
保证金：0；
填充：0；
}
.集装箱{
字体大小：16px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
颜色：#fff；
}
.第一个货柜{
背景色：#21bab3；
动画：向前淡出2秒；
动画延迟：1s；
}
.第二个货柜{
背景色：番茄；
}
h1{
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
字体大小：10vw；
文本转换：大写；
}
/*安奈米*/
@关键帧淡出{
从{
不透明度：1；
高度：100vh；
}
到{
不透明度：0；
高度：0vh；
}
}

页面标题
第一
第二

您需要javascript，这是正确的，您几乎有了一个很好的解决方案，只需更改一件事

对于您的“已播放”场景：

您正在做的是删除CSS类，该类通常在1秒后进行转换

您应该保留此选项（以防止再次滚动），但将初始位置扩展到动画将带给用户的位置，而无需设置动画。比如：

CSS:

然后在Javascript中，在删除动画后，应用动画对上述css类所做操作的结果：

JS:

这将扩展您的方法以删除转换，并仅应用您想要的css

在这里进行测试。（按两次Run可查看）

---

注意：本地存储用于JSFIDLE，但同样适用于会话存储。

localStorage

？或者对于过期的on（如您的Q所建议）

sessionStorage

。。我正在检查会话键是否存在，如果为空，我将向要设置动画的容器添加一个类，并设置会话键的值。在检查会话键是否为true以及是否为true之后，我将删除为容器设置动画的类。但是现在什么也没发生，因为迟来的回答，我正期待着其他人来回答这个问题。我在下面为您添加了一个。

if (sessionStorage.getItem("animationPlayedOnce", "true")) {
  firstContainer.classList.remove("animated");
}

.post_animated{
    opacity: 0;
    height: 0vh;
    animation: none!important; // don't animate
}

if (sessionStorage.getItem("animationPlayedOnce", "true")) {
      firstContainer.classList.remove("animated");
      // Add
      firstContainer.classList.add("post_animated");
    }