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:07:22 +08:00
parent 17fb67f653
commit 334b538092
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/WechatModal.vue
View File

@ -208,7 +208,6 @@ onUnmounted(() => {
display: grid; display: grid;
place-items: center; place-items: center;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
opacity: 0;
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
isolation: isolate; isolation: isolate;
} }
@ -226,9 +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;
opacity: 0;
transform: scale(0.95); transform: scale(0.95);
transition: all 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease;
z-index: v-bind('zIndex + 1'); z-index: v-bind('zIndex + 1');
} }
@ -407,24 +405,26 @@ onUnmounted(() => {
} }
/* 过渡动画 */ /* 过渡动画 */
.wechat-modal-enter-active .wechat-modal-mask { .wechat-modal-enter-active,
opacity: 1; .wechat-modal-leave-active {
transition: opacity 0.2s ease;
} }
.wechat-modal-enter-active .wechat-modal-container { .wechat-modal-enter-from,
opacity: 1; .wechat-modal-leave-to {
transform: scale(1);
}
.wechat-modal-leave-active .wechat-modal-mask {
opacity: 0; opacity: 0;
} }
.wechat-modal-leave-active .wechat-modal-container { .wechat-modal-enter-from .wechat-modal-container,
opacity: 0; .wechat-modal-leave-to .wechat-modal-container {
transform: scale(0.95); transform: scale(0.95);
} }
.wechat-modal-enter-to .wechat-modal-container,
.wechat-modal-leave-from .wechat-modal-container {
transform: scale(1);
}
/* 响应式布局 */ /* 响应式布局 */
@media (max-width: 360px) { @media (max-width: 360px) {
.wechat-modal-container { .wechat-modal-container {