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

问题描述

我想为bootstrap 4折叠元素的内容设置动画，但是我得到了双重渲染-一个未动画，然后是动画渲染。仅尝试了折叠元素，其他bootstrap元素不会发生这种情况。

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

是否可以解决此问题，以使其在应用动画之前不会呈现？

谢谢

解决方法

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

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