Rubicon/tutu
1
0
Fork 0
Code Issues 18 Pull requests 1 Projects 1 Activity Actions

TootActionGroup: add hidden animation
All checks were successful
/ depoly (push) Successful in 1m24s
Details

Browse source
This commit is contained in:
thislight 2025-01-03 21:43:41 +08:00
parent 0ca81cd50c
commit 1128a01e4c
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
4 changed files with 40 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/timelines/toots/TootActionGroup.css
View file

@ -2,7 +2,7 @@
padding-block: calc((var(--card-gut) - 10px) / 2);
contain: layout style;
animation: 125ms var(--tutu-anim-curve-std) TootActionGroup_fade-in;
animation: 125ms var(--tutu-anim-curve-sharp) TootActionGroup_fade-in;
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
@ -28,16 +28,19 @@
>.plain {
justify-content: center;
}
&.Transition-exit {
animation: 125ms var(--tutu-anim-curve-sharp) TootActionGroup_fade-out;
}
}
@keyframes TootActionGroup_fade-in {
0% {
opacity: 0.5;
transform: translateY(-10px);
margin-bottom: -20px;
margin-bottom: -30px;
}
25% {
margin-bottom: 0;
}
@ -46,4 +49,22 @@
opacity: 1;
transform: translateY(0);
}
}
@keyframes TootActionGroup_fade-out {
0% {
opacity: 1;
transform: translateY(0px);
margin-bottom: 0px;
}
75% {
margin-bottom: -30px;
}
100% {
opacity: 0;
transform: translateY(-10px);
margin-bottom: -30px;
}
}