Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add some animations to reactions

Browse Source
This commit is contained in:
Freeplay 2023-02-25 13:50:24 -05:00
parent 233408569b
commit 5d391bd198
2 changed files with 29 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/client/src/components/MkReactionsViewer.reaction.vue
View File

@ -98,7 +98,20 @@ useTooltip(buttonRef, async (showing) => {
padding: 0 6px; padding: 0 6px;
border-radius: 4px; border-radius: 4px;
pointer-events: all; pointer-events: all;
animation: scaleInSmall .3s cubic-bezier(0,0,0,1.2);
:deep(.mk-emoji) {
animation: scaleIn .4s cubic-bezier(0,0,0,1.5);
transition: transform .4s cubic-bezier(0,0,0,6);
}
&.reacted :deep(.mk-emoji) {
transition: transform .4s cubic-bezier(0,0,0,1);
}
&:active {
:deep(.mk-emoji) {
transition: transform .4s cubic-bezier(0,0,0,1);
transform: scale(.85);
}
}
&.canToggle { &.canToggle {
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);

15
packages/client/src/style.scss
View File

@ -615,3 +615,18 @@ hr {
transform: scaleX(1.00) scaleY(1.00) ; transform: scaleX(1.00) scaleY(1.00) ;
} }
} }
@media(prefers-reduced-motion: no-preference) {
@keyframes scaleIn {
from {
transform: scale(0);
opacity: 0;
}
}
@keyframes scaleInSmall {
from {
transform: scale(.8);
opacity: 0;
}
}
}