Yusaki/MiroFish
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance Step2EnvSetup.vue with modal transition effects for improved user experience

Browse source 
- Wrapped the profile detail modal in a Transition component to add smooth entry and exit animations.
- Introduced CSS styles for modal transitions, enhancing visual appeal and user engagement when displaying profile details.
This commit is contained in:
666ghj 2025-12-12 00:00:48 +08:00
parent fdbb0e2dc4
commit 65c1835879
1 changed files with 31 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/components/Step2EnvSetup.vue
View file

@ -499,9 +499,10 @@
</div>
<!-- Profile Detail Modal -->
<div v-if="selectedProfile" class="profile-modal-overlay" @click.self="selectedProfile = null">
<div class="profile-modal">
<div class="modal-header">
<Transition name="modal">
<div v-if="selectedProfile" class="profile-modal-overlay" @click.self="selectedProfile = null">
<div class="profile-modal">
<div class="modal-header">
<div class="modal-header-info">
<div class="modal-name-row">
<span class="modal-realname">{{ selectedProfile.realname }}</span>
@ -581,7 +582,8 @@
</div>
</div>
</div>
</div>
</div>
</Transition>
<!-- Bottom Info / Logs -->
<div class="system-logs">
@ -2368,5 +2370,30 @@ onUnmounted(() => {
.hint-icon {
font-size: 14px;
}
/* Modal Transition */
.modal-enter-active,
.modal-leave-active {
transition: opacity 0.3s ease;
}
.modal-enter-from,
.modal-leave-to {
opacity: 0;
}
.modal-enter-active .profile-modal {
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-leave-active .profile-modal {
transition: all 0.3s ease-in;
}
.modal-enter-from .profile-modal,
.modal-leave-to .profile-modal {
transform: scale(0.95) translateY(10px);
opacity: 0;
}
</style>