Как сохранить состояние анимации до сеанса, если он закончился с помощью sessionStorage? - PullRequest
Новая
       36

Как сохранить состояние анимации до сеанса, если он закончился с помощью sessionStorage?

0 голосов
/ 22 января 2019

позвольте мне объяснить, чего я хочу достичь.

Я хотел бы показать анимацию только один раз во время сеанса пользователя.Анимация может начаться, только если человек вышел из браузера и вернулся на веб-сайт.

Если человек обновляет или открывает 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>

1 Ответ

0 голосов
/ 23 января 2019

Вы правы в том, что вам нужен 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 . (Нажмите Run два раза, чтобы увидеть)

Примечание : localStorage использовался для jsFiddle, но то же самое будет применяться для sessionStorage.

...