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

13
src/components/WechatModal.vue
View File

@ -207,7 +207,6 @@ onUnmounted(() => {
background-color: rgba(0, 0, 0, 0.6);
display: grid;
place-items: center;
animation: fadeIn 0.3s ease;
backdrop-filter: blur(8px);
transition: opacity 0.3s ease;
isolation: isolate;
@ -226,8 +225,8 @@ onUnmounted(() => {
border-radius: 12px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
transform: scale(0.9);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
transform: scale(0.95);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: v-bind('zIndex + 1');
}
@ -385,7 +384,7 @@ onUnmounted(() => {
@keyframes scaleUp {
from {
transform: scale(0.8) translateY(20px);
transform: scale(0.95) translateY(10px);
opacity: 0;
}
to {
@ -400,7 +399,7 @@ onUnmounted(() => {
opacity: 1;
}
to {
transform: scale(0.8) translateY(20px);
transform: scale(0.95) translateY(10px);
opacity: 0;
}
}
@ -415,11 +414,11 @@ onUnmounted(() => {
}
.wechat-modal-enter-active .wechat-modal-container {
animation: scaleUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wechat-modal-leave-active .wechat-modal-container {
animation: scaleDown 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
animation: scaleDown 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 响应式布局 */