Animate. css анимация исчезает после завершения анимации - PullRequest
Новая
       62

Animate. css анимация исчезает после завершения анимации

1 голос
/ 05 февраля 2020

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

<ul class="menu-ani-item">
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
</ul>

.menu-ani-item {
  li {
    animation: slideInDown 2s;
    visibility: hidden;
    &:nth-child(1) {
      animation-delay: 0s;
    }
    &:nth-child(2) {
      animation-delay: 2s;
    }
    &:nth-child(3) {
      animation-delay: 3s;
    }
    &:nth-child(4) {
      animation-delay: 4s;
    }
    &:nth-child(5) {
      animation-delay: 5s;
    }
    &:nth-child(6) {
      animation-delay: 6s;
    }
    &:nth-child(7) {
      animation-delay: 7s;
    }
    &:nth-child(8) {
      animation-delay: 8s;
    }
    &:nth-child(9) {
      animation-delay: 9s;
    }
    &:nth-child(10) {
      animation-delay: 10s;
    }
    &:nth-child(11) {
      animation-delay: 11s;
    }
    &:nth-child(12) {
      animation-delay: 12s;
    }
  }
}

1 Ответ

0 голосов
/ 05 февраля 2020

Я предлагаю вам определить свою собственную анимацию, если она не работает, как вы sh. Если я не ошибаюсь, предопределенная анимация выглядит примерно так: 

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

Итак, ваша анимация должна быть: 

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

, а затем просто добавьте animation-fill-mode: forwards; к вашему li в css, чтобы сохранить видимость (чтобы ваш css стал чем-то вроде): 

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
.menu-ani-item {
  li {
    animation: slideInDown 2s;
    animation-fill-mode: forwards;
    visibility: hidden;
    ...

Рабочий пример здесь

Возможно, вам потребуется добавить префиксы поставщиков в ключевые кадры, чтобы убедиться, что все работает нормально кросс-браузеров. Вы можете прочитать больше о них здесь и здесь . Но в s css вы можете определить префикс общего поставщика, например здесь

...