francescoalbano/tripweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 animations

Browse Source
This commit is contained in:
itskovacs 2025-10-06 19:11:20 +02:00
parent df12119164
commit f41bc8356e
2 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/src/app/components/trip/trip.component.html
View File

@ -530,7 +530,7 @@
</div> </div>
<div <div
class="fixed bottom-6 left-6 z-40 w-40 md:w-60 max-h-[50vh] bg-white/90 dark:bg-surface-900/90 backdrop-blur-lg shadow-xl rounded-md overflow-hidden" class="fixed bottom-6 left-6 z-40 w-40 md:w-60 max-h-[50vh] bg-white/90 dark:bg-surface-900/90 shadow-xl rounded-md overflow-hidden"
[class.prettyprint]="isPrinting"> [class.prettyprint]="isPrinting">
@if (isMapFullscreenDays) { @if (isMapFullscreenDays) {
<div animate.enter="expand" animate.leave="collapse" class="overflow-y-auto max-h-[calc(30vh-5rem)] p-2 space-y-1"> <div animate.enter="expand" animate.leave="collapse" class="overflow-y-auto max-h-[calc(30vh-5rem)] p-2 space-y-1">

26
src/src/styles.scss
View File

@ -243,6 +243,19 @@ html {
} }
} }
@keyframes toggle {
0% {
max-height: 0;
opacity: 0;
transition: all 300ms ease-in;
}
100% {
max-height: auto;
opacity: 1;
transition: all 300ms ease-out;
}
}
.slide-x { .slide-x {
animation: slide-x 0.3s both normal; animation: slide-x 0.3s both normal;
} }
@ -260,17 +273,10 @@ html {
} }
.expand { .expand {
height: auto; animation: toggle 0.3s both normal;
opacity: 1;
transition:
height 300ms ease-out,
opacity 300ms ease-out;
} }
.collapse { .collapse {
height: 0; animation: toggle 0.3s both reverse;
opacity: 0; overflow: hidden;
transition:
height 300ms ease-in,
opacity 300ms ease-in;
} }