opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-10-28 02:58:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve dataset header collapse animation to create a smoother, more

Browse Source 
immediate transition effect. Replace transform-based animations with
comprehensive transitions for all properties including max-height,
margins, and padding for a fluid collapsing behavior.
This commit is contained in:
Dannon Baker
2025-05-14 08:32:23 -04:00
parent e433b47729
commit aacf13f7ab
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Dataset/DatasetView.vue
+8 -4
View File
@@ -306,15 +306,19 @@ watch(
.header-details {
margin-top: 0.5rem;
padding-left: 1rem;
max-height: 500px;
opacity: 1;
transform: translateY(0);
transition: opacity 0.25s ease, transform 0.25s ease;
transition: all 0.25s ease;
overflow: hidden;
}
.header-enter,
.header-enter, /* change to header-enter-from with Vue 3 */
.header-leave-to {
max-height: 0;
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
transform: translateY(-10px);
}
.dataset-tabs-container {