通过JS创建Bootstrap 5 Collapse元素时动画卡顿问题求助

嘿，我懂你遇到的这个烦恼——自己用JS动态生成的提交提示框，展开收起的动画卡得不行，但Bootstrap官方静态示例的动画就丝滑得很。其实问题出在结构层级上，咱们调整一下代码就能搞定：

你看静态示例里的结构是用一个带.collapse类的外层容器包裹alert，Collapse的动画是控制这个外层容器的高度变化，这样alert的内边距、边框样式不会干扰动画的高度计算，自然流畅。而你之前是直接把alert元素作为Collapse的目标，导致动画计算时出现偏差，所以卡顿。

那咱们把JS代码改成下面这样，和静态示例的结构对齐：

function sendForm(event, form) {
    // 1. 创建外层collapse容器，必须添加.collapse类
    const collapseContainer = document.createElement('div');
    collapseContainer.classList.add('collapse');

    // 2. 创建alert提示框，保留你原来的样式和内容逻辑
    const alertWrapper = document.createElement('div');
    alertWrapper.setAttribute('role', 'alert');
    alertWrapper.classList.add('alert', 'alert-dismissible', 'alert-success');
    alertWrapper.innerHTML='<span>Success!</span><button type="button" class="btn-close" data-bs-dismiss="alert"></button>';

    // 3. 按层级组装元素：alert放进collapse容器，再把容器插入表单
    collapseContainer.appendChild(alertWrapper);
    form.prepend(collapseContainer);

    // 4. 初始化Collapse实例并触发显示
    const bsCollapse = bootstrap.Collapse.getOrCreateInstance(collapseContainer);
    bsCollapse.show();

    // 定时隐藏并移除元素（注意留足动画时长，Bootstrap默认动画是300ms）
    setTimeout(() => {
        bsCollapse.hide();
    }, 4000);
    setTimeout(() => {
        collapseContainer.remove();
    }, 4300); // 比hide多300ms，确保动画完成后再移除元素

    form.reset();
    event.preventDefault();
}

这样修改后，动态生成的提示框结构就和静态示例完全一致了，动画自然就和官方示例一样流畅啦！

另外还有个小细节：Bootstrap的data-bs-dismiss="alert"按钮只会关闭alert本身，如果希望点击关闭按钮时也能触发Collapse的隐藏动画，可以给按钮加个事件监听，手动调用bsCollapse.hide()，不过如果只是简单关闭提示，现有逻辑也能正常工作。

内容的提问来源于stack exchange，提问作者someone