时间戳

首页 > 解决方案 > 如果以 sessionStorage 结束，如何保持动画状态直到会话结束？

javascript - 如果以 sessionStorage 结束，如何保持动画状态直到会话结束？

问题描述

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

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

如果此人在另一个选项卡中刷新或打开 url，则动画不会重新开始。

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

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

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

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

这里是html和css

body {
  margin: 0;
  padding: 0;
}
.container {
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #fff;
}

.first-container {
  background-color: #21bab3;
  animation: fade-out 2s ease-in forwards;
  animation-delay: 1s;
}

.second-container {
  background-color: tomato;
}

h1 {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 10vw;
  text-transform: uppercase;
}

/*ANIAMTION*/

@keyframes fade-out {
  from {
    opacity: 1;
    height: 100vh;
  }
  to {
    opacity: 0;
    height: 0vh;
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  </head>
  <body>
    <div class="container first-container"><h1>first</h1></div>
    <div class="container second-container"><h1>second</h1></div>
    <script src="main.js"></script>
  </body>
</html>

我尝试查看如何在 sessionStorage 中设置动画，但我没有找到答案。

我想在没有外部库的情况下实现它。

提前致谢

****编辑*****

经过提示后，我尝试使用会话存储，但似乎无法确切知道该做什么。

我正在检查会话键是否存在，如果它为空我将一个类添加到我想要动画的容器并设置会话键的值。

在我检查会话密钥是否为真之后，如果为真，我将删除为容器设置动画的类。

但现在什么也没有发生

var firstContainer = document.querySelector(".first-container");
var secondContainer = document.querySelector(".second-container");

if (localStorage.getItem("animationPlayedOnce") === null) {
  firstContainer.classList.add("animated");
  sessionStorage.setItem("animationPlayedOnce", "true");
}

if (sessionStorage.getItem("animationPlayedOnce", "true")) {
  firstContainer.classList.remove("animated");
}
body {
  margin: 0;
  padding: 0;
}
.container {
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #fff;
}

.first-container {
  background-color: #21bab3;
}

.animated {
  animation: fade-out 2s ease-in forwards;
  animation-delay: 1s;
}

.second-container {
  background-color: tomato;
}

h1 {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 10vw;
  text-transform: uppercase;
}

/*ANIAMTION*/

@keyframes fade-out {
  from {
    opacity: 1;
    height: 100vh;
  }
  to {
    opacity: 0;
    height: 0vh;
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  </head>
  <body>
    <div id="animated" class="container first-container animated">
      <h1>first</h1>
    </div>
    <div class="container second-container"><h1>second</h1></div>
    <script src="main.js"></script>
  </body>
</html>

标签： javascriptlocal-storagecss-animationssession-storage

解决方案

你是对的，因为你需要 javascript，而且你几乎有一个很好的解决方案，只需改变一件事..

对于你的“已经玩过”的场景：

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

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

您应该保留它（以防止再次滚动），但将初始位置扩展到动画将带给用户的位置，而不是动画。就像是 ：

CSS：

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

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

JS：

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

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

在JSFiddle中进行了测试。（按两次运行查看）

注意：localStorage 用于 jsFiddle，但同样适用于 sessionStorage。

推荐阅读