Enhance Step2EnvSetup.vue with modal transition effects for improved user experience
- 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:
parent
fdbb0e2dc4
commit
65c1835879
1 changed files with 31 additions and 4 deletions
|
|
@ -499,6 +499,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Profile Detail Modal -->
|
<!-- Profile Detail Modal -->
|
||||||
|
<Transition name="modal">
|
||||||
<div v-if="selectedProfile" class="profile-modal-overlay" @click.self="selectedProfile = null">
|
<div v-if="selectedProfile" class="profile-modal-overlay" @click.self="selectedProfile = null">
|
||||||
<div class="profile-modal">
|
<div class="profile-modal">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
|
|
@ -582,6 +583,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</Transition>
|
||||||
|
|
||||||
<!-- Bottom Info / Logs -->
|
<!-- Bottom Info / Logs -->
|
||||||
<div class="system-logs">
|
<div class="system-logs">
|
||||||
|
|
@ -2368,5 +2370,30 @@ onUnmounted(() => {
|
||||||
.hint-icon {
|
.hint-icon {
|
||||||
font-size: 14px;
|
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>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue