mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-09 16:53:36 -05:00
fix: added animation to jumpbar
This commit is contained in:
parent
4d769f42e1
commit
074057b481
1 changed files with 14 additions and 7 deletions
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue