cattom/PersonalPage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 为 WechatModal 组件新增淡出动画效果，并优化进入和离开动画的实现

Browse Source
This commit is contained in:
Cat Tom 2025-03-26 11:59:24 +08:00
parent 0022b86dda
commit ba424f450f
1 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/WechatModal.vue
View File

@ -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,