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

优化 WechatModal 组件的动画效果，调整透明度和过渡时间以提升用户体验

Browse Source
This commit is contained in:
Cat Tom 2025-03-26 12:03:42 +08:00
parent 1a8866b86e
commit 17fb67f653
1 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/WechatModal.vue
View File

@ -208,7 +208,8 @@ onUnmounted(() => {
display: grid;
place-items: center;
backdrop-filter: blur(8px);
transition: opacity 0.3s ease;
opacity: 0;
transition: opacity 0.2s ease;
isolation: isolate;
}
@ -225,8 +226,9 @@ onUnmounted(() => {
border-radius: 12px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
transform: scale(0.98);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
transform: scale(0.95);
transition: all 0.2s ease;
z-index: v-bind('zIndex + 1');
}
@ -405,20 +407,22 @@ onUnmounted(() => {
}
/* 过渡动画 */
.wechat-modal-enter-active {
animation: fadeIn 0.3s ease;
}
.wechat-modal-leave-active {
animation: fadeOut 0.3s ease;
.wechat-modal-enter-active .wechat-modal-mask {
opacity: 1;
}
.wechat-modal-enter-active .wechat-modal-container {
animation: scaleUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 1;
transform: scale(1);
}
.wechat-modal-leave-active .wechat-modal-mask {
opacity: 0;
}
.wechat-modal-leave-active .wechat-modal-container {
animation: scaleDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
transform: scale(0.95);
}
/* 响应式布局 */
@ -448,17 +452,12 @@ 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,
.wechat-modal-container,
.qr-code-image,
.scan-animation,
.loader-spinner {
transition: none !important;
animation: none !important;
}
}
</style>