cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-25 00:20:57 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix: added animation to jumpbar

Browse source
This commit is contained in:
trashtemp 2022-01-21 09:15:31 +01:00
parent 4d769f42e1
commit 074057b481
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
1 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/common/messaging/bars/JumpToBottom.tsx
View file

@ -13,7 +13,7 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
z-index: 1;
position: relative;
@keyframes bounce-from-bottom {
@keyframes bottomBounce {
0% {
transform: translateY(33px);
}
@ -22,22 +22,29 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
}
}
animation-name: bounce-from-bottom;
animation-duration: 340ms;
animation-delay: 0ms;
animation-timing-function: cubic-bezier(0.2, 0.9, 0.5, 1.16);
animation-fill-mode: forwards;
@keyframes topBounce {
0% {
transform: translateY(-33px);
}
100% {
transform: translateY(0px);
}
}
${(props) =>
props.position === "top" &&
css`
top: 0;
animation: topBounce 340ms cubic-bezier(0.2, 0.9, 0.5, 1.16)
forwards;
`}
${(props) =>
props.position === "bottom" &&
css`
top: -28px;
animation: bottomBounce 340ms cubic-bezier(0.2, 0.9, 0.5, 1.16)
forwards;
${() =>
isTouchscreenDevice &&
@ -54,7 +61,7 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
align-items: center;
cursor: pointer;
font-size: 12px;
font-weight: 500;
font-weight: 600;
padding: 0 8px;
user-select: none;
justify-content: space-between;