如何为Bootstrap模态框宽度调整添加动画效果

点击按钮后调整Bootstrap 5模态框的宽度，当前代码可正常实现宽度调整，但想要为模态框放大的过程添加动画效果。已尝试在CSS中使用animate、transition属性，但均未成功，查阅相关问题的解决方案也不适用，请问该如何实现这一需求？

现有代码 #

TEMPLATE #

<template>
  <div class="modal fade modal-sm" id="modalID" tabindex="-1">
    <div class="modal-dialog" :class="resizeModal == true ? 'size-modal' : ''">
      <div class="modal-body">
        <button class="btn btn-dark col-3" @click="resizeModal = !resizeModal"></button>
      </div>
    </div>
  </div>
</template>

SCRIPT #

<script lang="ts" setup>
import { ref } from "vue";
const resizeModal = ref(false);
</script>

STYLE #

<style>
.size-modal {
  --bs-modal-width: 80%;
}
</style>

直接修改--bs-modal-width没法触发过渡动画，原因是Bootstrap的modal-dialog默认没给宽度变化加过渡支持，而且部分浏览器对自定义属性的transition兼容性有限。试试下面两种可行的方法：

方法1：给modal-dialog添加宽度过渡 #

修改CSS，给默认的modal-dialog设置固定宽度并添加过渡规则，再调整放大后的样式：

<style>
.modal-dialog {
  /* 对应Bootstrap modal-sm的默认宽度300px */
  width: 300px;
  /* 0.3s为动画时长，ease为缓动效果，可按需调整 */
  transition: width 0.3s ease;
}

.size-modal {
  width: 80% !important;
  --bs-modal-width: 80%;
}
</style>

这里用!important是为了覆盖Bootstrap的默认样式优先级，确保自定义宽度能生效。

方法2：用transform缩放实现动画 #

如果不需要精确控制宽度，用缩放动画更流畅，还能避免宽度调整带来的布局偏移问题：

<style>
.modal-dialog {
  transition: transform 0.3s ease;
  transform-origin: center;
}

.size-modal {
  transform: scale(1.2);
}
</style>

这种方式通过缩放模态框容器实现视觉上的放大效果，动画过渡会更丝滑。

注意事项 #

• 不要给modal-dialog添加会打断过渡的属性（比如display: none），Bootstrap自带的fade类是控制模态框显示/隐藏的，和宽度/缩放动画不冲突。
• 确保Vue的响应式类切换逻辑正常，没有被其他样式或JS逻辑干扰。

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