如何使用动画调整 Bootstrap 模式宽度

Question

我想在单击按钮后调整我的

Bootstrap 5 modal width

的大小。我当前的代码效果很好。 但现在我想在这种变化变大时为其设置动画。

我尝试过在我的

animate

中使用

transition

style-css

，但没有任何结果。

我发现了很多关于这个主题的问题 - 但它们都不适合我。

我怎样才能实现这个目标？谢谢！

模板

<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 lang="ts" setup>
import { ref } from "vue";
const resizeModal = ref(false);
</script>

风格

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

Answer 1

您可以尝试以下步骤：

• 通过向模式对话框添加条件类来更新模板

<template>
  <div class="modal fade" id="modalID" tabindex="-1">
    <div class="modal-dialog" :class="{ 'size-modal': resizeModal }">
      <div class="modal-content">
        <div class="modal-body">
          <button class="btn btn-dark col-3" @click="resizeModal = !resizeModal">
            Toggle Size
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

• 关于你的脚本，只需确保

  resizeModal

  是 Vue 中的反应变量

• 添加 CSS 动画并处理宽度过渡

<style>
.modal-dialog {
  transition: width 0.5s ease-in-out;
}

.size-modal {
  width: 80% !important; /* Adjust as needed */
}
</style>

我认为这应该有效或至少对你有帮助。