Simplify animations

This commit is contained in:
Claude Brisson
2024-04-11 21:04:10 +02:00
parent 555c27275b
commit bdf412e592

View File

@@ -107,7 +107,7 @@
right: 0; right: 0;
background-color: black; background-color: black;
opacity: 0; opacity: 0;
transition: opacity 0.5s; transition: opacity 300ms;
z-index: 50; z-index: 50;
pointer-events: none; pointer-events: none;
} }
@@ -120,7 +120,7 @@
.ui.modal { .ui.modal {
display: block; display: block;
opacity: 0; opacity: 0;
transition: opacity 0.5s; transition: opacity 300ms;
pointer-events: none; pointer-events: none;
} }
@@ -145,7 +145,7 @@
.button.floating { .button.floating {
box-shadow: 0px 8px 8px -5px rgba(0,0,0,35%); box-shadow: 0px 8px 8px -5px rgba(0,0,0,35%);
transition: all 0.3s; transition: all 200ms;
&.white { &.white {
border: solid 1px black; border: solid 1px black;
background-color: white; background-color: white;
@@ -155,7 +155,7 @@
transform: scale(1.05); transform: scale(1.05);
} }
&:active { &:active {
transition: all 0.1s; transition: all 200ms;
box-shadow: none; box-shadow: none;
transform: translate(0px, 5px); transform: translate(0px, 5px);
} }
@@ -235,7 +235,7 @@
max-height: 0; max-height: 0;
overflow-y: hidden; overflow-y: hidden;
padding: 0 1em 0 2em; padding: 0 1em 0 2em;
transition: all 0.5s ease-out; //transition: all 1s linear;
&.active { &.active {
padding: 0.5em 1em 0.5em 2em; padding: 0.5em 1em 0.5em 2em;
max-height: 150vh; max-height: 150vh;
@@ -392,7 +392,7 @@
max-height: 80vh; max-height: 80vh;
max-width: 80vw; max-width: 80vw;
transform: rotate3d(1, 0, 0, 90deg); transform: rotate3d(1, 0, 0, 90deg);
transition: transform 1s cubic-bezier(0.500, 0.250, 0.300, 1.650); transition: transform 300ms ease-out;
background-color: white; background-color: white;
padding: 1em; padding: 1em;
border-radius: 5px; border-radius: 5px;
@@ -423,7 +423,7 @@
} }
&.shown { &.shown {
pointer-events: initial; pointer-events: initial;
transition: transform 1s cubic-bezier(0.500, 0.250, 0.300, 1.650); transition: transform 300ms ease-out; // cubic-bezier(0.500, 0.250, 0.300, 1.650);
display: block; display: block;
.popup-body { .popup-body {
transform: rotate3d(1, 0, 0, 0deg); transform: rotate3d(1, 0, 0, 0deg);