diff --git a/src/components/WechatModal.vue b/src/components/WechatModal.vue index caf53fd..be5100f 100644 --- a/src/components/WechatModal.vue +++ b/src/components/WechatModal.vue @@ -378,6 +378,11 @@ onUnmounted(() => { to { opacity: 1; } } +@keyframes fadeOut { + from { opacity: 1; } + to { opacity: 0; } +} + @keyframes scaleUp { from { transform: scale(0.8) translateY(20px); @@ -389,17 +394,32 @@ onUnmounted(() => { } } +@keyframes scaleDown { + from { + transform: scale(1) translateY(0); + opacity: 1; + } + to { + transform: scale(0.8) translateY(20px); + opacity: 0; + } +} + +/* 过渡动画 */ +.wechat-modal-enter-active { + animation: fadeIn 0.3s ease; +} + +.wechat-modal-leave-active { + animation: fadeOut 0.3s ease; +} + .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, -.wechat-modal-leave-active .wechat-modal-container { - transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1); + animation: scaleDown 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1); } /* 响应式布局 */ @@ -429,6 +449,10 @@ onUnmounted(() => { /* 减少运动偏好设置 */ @media (prefers-reduced-motion: reduce) { + .wechat-modal-enter-active, + .wechat-modal-leave-active, + .wechat-modal-enter-active .wechat-modal-container, + .wechat-modal-leave-active .wechat-modal-container, .wechat-modal-container, .wechat-modal-mask, .qr-code-image,