Angular / SCSS: анимация не применяется к элементу

Question

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

Вот как это выглядит.Я нажимаю текст комментария, а затем он отображает комментарии.Прямо сейчас он открывается без анимации, несмотря на код, который я добавил ниже.

код шаблона: я добавил индекс вкласс, чтобы убедиться, что я получаю хороший эффект ошеломленияномер элемента

[class^="comment-"] {
  animation-name: fadeIn;
  animation-duration: 1s;
}

.comment {
  &-0 {
    animation-delay: 1s;
  }

  &-1 {
    animation-delay: 2s;
  }

  &-2 {
    animation-delay: 3s;
  }

  &-3 {
    animation-delay: 4s;
  }

  &-4 {
    animation-delay: 5s;
  }
}

@keyframes fadeIn {
  from {opacity: 0}
  to {opacity: 1}
}

Answer 1

используйте этот код для анимации класса вашего комментария

  @for $i from 0 through 4 {
     .comment-#{$i} {
         animation-name: fadeIn;
         animation-duration: 1s;
         animation-delay: $i+1s;
        }
    }

не зависит от

[class^="comment-"] {
  animation-name: fadeIn;
  animation-duration: 1s;
}
.comment {
  &-0 {
    animation-delay: 1s;
  }

  &-1 {
    animation-delay: 2s;
  }

  &-2 {
    animation-delay: 3s;
  }

  &-3 {
    animation-delay: 4s;
  }

  &-4 {
    animation-delay: 5s;
  }
}