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