simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fancier transition/animation timing function

Browse source
This commit is contained in:
Lim Chee Aun 2022-12-20 15:13:49 +08:00
parent 5e687e871f
commit c16b7764f2
2 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/app.css
View file

@ -334,12 +334,12 @@ a.mention span {
} }
@keyframes slide-in { @keyframes slide-in {
0% { 0% {
opacity: 0; opacity: 0.5;
transform: translateX(100%); transform: translate3d(100%, 0, 0);
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: translateX(0); transform: translate3d(0, 0, 0);
} }
} }
.deck-backdrop .deck { .deck-backdrop .deck {
@ -347,7 +347,7 @@ a.mention span {
max-width: 100vw; max-width: 100vw;
border-left: 1px solid var(--divider-color); border-left: 1px solid var(--divider-color);
background-color: var(--bg-color); background-color: var(--bg-color);
animation: slide-in 0.2s ease-out; animation: slide-in 0.5s var(--timing-function);
box-shadow: -1px 0 var(--bg-color); box-shadow: -1px 0 var(--bg-color);
} }
.deck-backdrop .deck .status { .deck-backdrop .deck .status {
@ -356,7 +356,7 @@ a.mention span {
.decks { .decks {
flex-grow: 1; flex-grow: 1;
transition: transform 0.2s ease-in-out; transition: transform 0.5s var(--timing-function);
} }
.deck-close { .deck-close {
@ -668,7 +668,7 @@ button.carousel-dot[disabled].active {
display: flex; display: flex;
} }
.decks:has(~ .deck-backdrop) { .decks:has(~ .deck-backdrop) {
transform: translateX(-5vw); transform: translate3d(-5vw, 0, 0);
} }
.deck-backdrop .deck { .deck-backdrop .deck {
width: 50%; width: 50%;

2
src/index.css
View file

@ -30,6 +30,8 @@
--img-bg-color: rgba(128, 128, 128, 0.2); --img-bg-color: rgba(128, 128, 128, 0.2);
--loader-color: #1c1e2199; --loader-color: #1c1e2199;
--comment-line-color: #e5e5e5; --comment-line-color: #e5e5e5;
--timing-function: cubic-bezier(0.3, 0.5, 0, 1);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {