Почему анимация не работает, если я меняю страницы? - PullRequest
Новая
       35

Почему анимация не работает, если я меняю страницы?

2 голосов
/ 29 мая 2019

У меня есть сайт Drupal 8 с темой Bootstrap 3.

Я создал домашнюю страницу с новостной лентой.Всякий раз, когда на сайте появляется публикация, она создает сообщение в ленте новостей.Сообщения могут иметь статус «прочитано» или «непрочитано».

Я хочу, чтобы, когда на странице присутствовал класс .action-flag, к логотипу сайта применялась анимация.

CSS иФайл JS включен на все страницы сайта.

Класс .action-flag находится только на домашней странице, когда сообщение не помечено как прочитанное.

Вот структура моегодомашняя страница:

enter image description here

Вот мой код JS: 

  if ($("#pills-private .action-flag").length) {
    $(".region-navigation-logo img").addClass("timeline-notification");
  };

Вот мой код CSS: 

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(138, 186, 18, 1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(138, 186, 18, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(138, 186, 18, 0);
    }
}

.region-navigation-logo img {
    height: 56px;
    border-radius: 50%;
    background: #8aba12;
}

.timeline-notification {
    box-shadow: 0 0 0 rgba(138, 186, 18, 1);
    animation: pulse 2s infinite;
}

В настоящее время анимация работает очень хорошо.Но только если я на главной странице.Если я перехожу на другую страницу, анимация больше не работает.

ПРОБЛЕМА

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

Есть ли решение для этого?

...