只靠CSS只能实现对话框出现的动画效果,无法实现对话框消失的效果
示例
BaseModal.vue
<template>
<div class="backdrop" @click="$emit('close')"></div>
<dialog open>
<slot></slot>
</dialog>
</template>
<script>
export default {
emits: ['close'],
};
</script>
<style scoped>
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 10;
background-color: rgba(0, 0, 0, 0.75);
}
dialog {
position: fixed;
top: 30vh;
width: 30rem;
left: calc(50% - 15rem);
margin: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
border-radius: 12px;
padding: 1rem;
background-color: white;
z-index: 100;
border: none;
animation: modal 0.3s ease-out forwards;
}
@keyframes modal {
from{
opacity: 0;
transform: translateY(-50px) scale(0.9);
}
to{
opacity: 1;
transform: translateY(0) scale(1);
}
}
</style>