diff --git a/src/components/WechatModal.vue b/src/components/WechatModal.vue index dff47be..be66c8e 100644 --- a/src/components/WechatModal.vue +++ b/src/components/WechatModal.vue @@ -208,7 +208,6 @@ onUnmounted(() => { display: grid; place-items: center; backdrop-filter: blur(8px); - opacity: 0; transition: opacity 0.2s ease; isolation: isolate; } @@ -226,9 +225,8 @@ onUnmounted(() => { border-radius: 12px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); overflow: hidden; - opacity: 0; transform: scale(0.95); - transition: all 0.2s ease; + transition: transform 0.2s ease, opacity 0.2s ease; z-index: v-bind('zIndex + 1'); } @@ -407,24 +405,26 @@ onUnmounted(() => { } /* 过渡动画 */ -.wechat-modal-enter-active .wechat-modal-mask { - opacity: 1; +.wechat-modal-enter-active, +.wechat-modal-leave-active { + transition: opacity 0.2s ease; } -.wechat-modal-enter-active .wechat-modal-container { - opacity: 1; - transform: scale(1); -} - -.wechat-modal-leave-active .wechat-modal-mask { +.wechat-modal-enter-from, +.wechat-modal-leave-to { opacity: 0; } -.wechat-modal-leave-active .wechat-modal-container { - opacity: 0; +.wechat-modal-enter-from .wechat-modal-container, +.wechat-modal-leave-to .wechat-modal-container { transform: scale(0.95); } +.wechat-modal-enter-to .wechat-modal-container, +.wechat-modal-leave-from .wechat-modal-container { + transform: scale(1); +} + /* 响应式布局 */ @media (max-width: 360px) { .wechat-modal-container {