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

feat: 优化 WechatModal 组件的样式和动画效果，使用 grid 布局和新增淡入缩放动画

Browse Source
This commit is contained in:
Cat Tom 2025-03-26 11:34:07 +08:00
parent 4cbf1ec7ab
commit ecd02793d4
1 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/WechatModal.vue
View File

@ -203,14 +203,11 @@ onUnmounted(() => {
.wechat-modal-mask { .wechat-modal-mask {
position: fixed; position: fixed;
z-index: v-bind('zIndex'); z-index: v-bind('zIndex');
top: 0; inset: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
display: flex; display: grid;
align-items: center; place-items: center;
justify-content: center; animation: fadeIn 0.3s ease;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
@ -372,15 +369,29 @@ onUnmounted(() => {
} }
} }
/* 过渡动画 */ /* 独立卡片动画 */
.wechat-modal-enter-from, @keyframes fadeIn {
.wechat-modal-leave-to { from { opacity: 0; }
opacity: 0; to { opacity: 1; }
} }
.wechat-modal-enter-from .wechat-modal-container, @keyframes scaleUp {
.wechat-modal-leave-to .wechat-modal-container { from {
transform: scale(0.8); transform: scale(0.8) translateY(20px);
opacity: 0;
}
to {
transform: scale(1) translateY(0);
opacity: 1;
}
}
.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-enter-active .wechat-modal-container,