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
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">
@if (isMapFullscreenDays) {
<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 {
animation: slide-x 0.3s both normal;
}
@ -260,17 +273,10 @@ html {
}
.expand {
height: auto;
opacity: 1;
transition:
height 300ms ease-out,
opacity 300ms ease-out;
animation: toggle 0.3s both normal;
}
.collapse {
height: 0;
opacity: 0;
transition:
height 300ms ease-in,
opacity 300ms ease-in;
animation: toggle 0.3s both reverse;
overflow: hidden;
}