diff --git a/src/components/WechatModal.vue b/src/components/WechatModal.vue index 9938490..ea62f35 100644 --- a/src/components/WechatModal.vue +++ b/src/components/WechatModal.vue @@ -203,14 +203,11 @@ onUnmounted(() => { .wechat-modal-mask { position: fixed; z-index: v-bind('zIndex'); - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; background-color: rgba(0, 0, 0, 0.6); - display: flex; - align-items: center; - justify-content: center; + display: grid; + place-items: center; + animation: fadeIn 0.3s ease; backdrop-filter: blur(8px); transition: opacity 0.3s ease; } @@ -372,15 +369,29 @@ onUnmounted(() => { } } -/* 过渡动画 */ -.wechat-modal-enter-from, -.wechat-modal-leave-to { - opacity: 0; +/* 独立卡片动画 */ +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } } -.wechat-modal-enter-from .wechat-modal-container, -.wechat-modal-leave-to .wechat-modal-container { - transform: scale(0.8); +@keyframes scaleUp { + from { + transform: scale(0.8) translateY(20px); + opacity: 0; + } + to { + transform: scale(1) translateY(0); + opacity: 1; + } +} + +.wechat-modal-enter-active .wechat-modal-container { + animation: scaleUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1); +} + +.wechat-modal-leave-active .wechat-modal-container { + animation: scaleUp 0.2s reverse; } .wechat-modal-enter-active .wechat-modal-container,