如何使用 Bootstrap 4 折叠元素解决双重渲染问题

Question

我想为 Bootstrap 4 折叠元素的内容制作动画，但我得到了双重渲染 - 一个是非动画的，然后是动画渲染。我尝试过的其他引导元素不会发生这种情况。只有折叠元素。

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

有没有办法解决这个问题，使其在应用动画之前不渲染？

Answer 1

修改了选择器以包括折叠。似乎可以满足我的需求。

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