Is there a way to resize my Bootstrap 5 modal width and add an animation effect when it expands? I've tried using animate and transition in my style-css but haven't had any success so far. I've looked at other solutions online, but none seem to work for me. How can I achieve this? Thank you!
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>