Почему анимации @keyframes не работают с Vue.js? - PullRequest
Новая
       21

Почему анимации @keyframes не работают с Vue.js?

1 голос
/ 25 мая 2019

Я пытаюсь сделать ссылку мигать, когда пользователь загружает сайт.Однако анимация не работает в Vue.

Я пробовал тот же код без Vue в отдельном файле, и он работал просто отлично.

Это элемент, который должен мигать.(Класс 'flash' отображается в DOM. Кажется, это не проблема с моим JS) 

<a href="/test/" :class="isFlashing ? 'flash' : ''">
  <h2>Test</h2>
</a>

Анимация в CSS: 

.flash {
  -webkit-animation: flashing 0.5s infinite;
  animation: flashing 0.5s infinite;
}

@-webkit-keyframes flashing {
  0% {
    color: white;
  }
  50% {
    color: black;
  }
  100% {
    color: white;
  }
}

@keyframes flashing {
  0% {
    color: white;
  }
  50% {
    color: black;
  }
  100% {
    color: white;
  }
}

И стиль длясам элемент h2: 

h2 {
  position: absolute;
  top: 93%;

  color: white;

  margin-left: 7%;
}

Я ожидал, что ссылка будет мигать бесконечно, но ничего не произошло.Это просто остается белым.Как уже было сказано, анимация работает, когда Vue не загружен.

1 Ответ

0 голосов
/ 25 мая 2019

в стилях h2: color: white; переопределит правила цвета анимации.

Либо удалите color: white; из стилей h2, либо добавьте класс flash к элементу h2 вместо элемента a.

...