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:02:12 +08:00
parent 700c09b933
commit 1a8866b86e
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/WechatModal.vue
View File

@ -225,8 +225,8 @@ onUnmounted(() => {
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
overflow: hidden; overflow: hidden;
transform: scale(0.95); transform: scale(0.98);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: v-bind('zIndex + 1'); z-index: v-bind('zIndex + 1');
} }
@ -384,22 +384,22 @@ onUnmounted(() => {
@keyframes scaleUp { @keyframes scaleUp {
from { from {
transform: scale(0.95) translateY(10px); transform: scale(0.98);
opacity: 0; opacity: 0;
} }
to { to {
transform: scale(1) translateY(0); transform: scale(1);
opacity: 1; opacity: 1;
} }
} }
@keyframes scaleDown { @keyframes scaleDown {
from { from {
transform: scale(1) translateY(0); transform: scale(1);
opacity: 1; opacity: 1;
} }
to { to {
transform: scale(0.95) translateY(10px); transform: scale(0.98);
opacity: 0; opacity: 0;
} }
} }
@ -414,11 +414,11 @@ onUnmounted(() => {
} }
.wechat-modal-enter-active .wechat-modal-container { .wechat-modal-enter-active .wechat-modal-container {
animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); animation: scaleUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
.wechat-modal-leave-active .wechat-modal-container { .wechat-modal-leave-active .wechat-modal-container {
animation: scaleDown 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); animation: scaleDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
/* 响应式布局 */ /* 响应式布局 */