Как я могу исправить проблему двойного рендеринга с использованием элемента свертывания Bootstrap 4

#bootstrap-4 #collapse

#bootstrap-4

Вопрос:

Я хочу анимировать содержимое элемента свертывания Bootstrap 4, но я получаю двойной рендеринг, за которым следует анимированный рендеринг. Этого не происходит с другими элементами начальной загрузки, которые я пробовал. Только элемент свертывания.

https://codesandbox.io/s/collapse-alert-forked-6z6e9?file=/src/styles.css:233-388

Есть ли способ исправить это, чтобы оно не отображалось до применения анимации?

Ответ №1:

изменен селектор, чтобы включить свертывание. кажется, работает для моих нужд.

 .collapsing,
.collapse {
  animation: opacity 1s, border 4s;
  animation-fill-mode: both;
}