Как сохранить состояние анимации до завершения сеанса с помощью 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>


javascript css-animations local-storage session-storage
person Max    schedule 22.01.2019    source источник
comment
localStorage ? developer.mozilla.org/en-US/docs/Web/ API/Window/localStorage или с истечением срока действия (как предлагает ваш вопрос) sessionStorage.. developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage   -  person Pogrindis    schedule 22.01.2019
comment
Я проверяю, существует ли ключ сеанса, если он нулевой. Я добавляю класс в контейнер, который хочу анимировать, и устанавливаю значение ключа сеанса. После того, как я проверю, является ли ключ сеанса истинным, и если он верен, я удаляю класс, который анимировал контейнер. но сейчас ничего не происходит   -  person Max    schedule 22.01.2019
comment
извините за поздний ответ, я ожидал, что кто-то другой доберется до этого. Я добавил ниже один для вас.   -  person Pogrindis    schedule 23.01.2019

Ответы (1)


arrow_upward
1
arrow_downward

Вы правы в том, что вам нужен javascript, и у вас почти есть хорошее решение, нужно изменить только одну вещь.

для вашего сценария «Уже сыграно»:

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

Что вы делаете, так это удаляете класс CSS, который обычно выполняет переход через 1 секунду.

Вы должны сохранить это (чтобы предотвратить другую прокрутку), но расширить начальную позицию, чтобы анимация привела пользователя без анимации. Что-то типа :

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.

person Pogrindis    schedule 23.01.2019