css - Bootstrap 5折叠使用宽度不从隐藏过渡

Question

我正在尝试使用 BS5 折叠组件，但使用宽度而不是高度。

我修改了我的元素.collapsing以使用宽度而不是高度：

#sidebar {
    width: 15rem;
}

#sidebar.collapsing {
    width: 0;
    height: auto;
    transition: width 0.35s ease;
}

这对于隐藏元素时非常有用。它显示了平滑的隐藏动画。但是，在显示元素时，根本没有动画。

这是一个完整的代码示例：

https://jsfiddle.net/v72p0azg/

单击汉堡图标以展开/折叠侧边栏。如您所见，在折叠时它工作得很好，但在展开时它显示没有过渡。

标签： csstwitter-bootstrap

Answer 1

您还需要将过渡添加到普通的#sidebar。

尝试这个。

 #sidebar {
    width: 15rem;
    transition: width 0.35s ease;
}

#sidebar.collapsing {
    width: 0;
    height: auto;
    transition: width 0.35s ease;
    }