Не выполнять анимацию при переходе между страницами сайта

Question

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

@keyframes slideInFromTop {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animated-element {
  animation: slideInFromTop 1s ease-out;
}

<h1 class=animated-element>Hi!</h1>

Answer 1

Возможно, это поможет (в сниппете не работает из-за настроек безопасности):

if (document.referer != null && !document.referer.startsWith(location.origin)) {
  document.querySelector('.animated-element').classList.remove('animated-element')
}

@keyframes slideInFromTop {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animated-element {
  animation: slideInFromTop 1s ease-out both 1;
}

<h1 class=animated-element>Hi!</h1>

БЛОГ НА HUSL

Не выполнять анимацию при переходе между страницами сайта

Ответы (1 шт):