-
Notifications
You must be signed in to change notification settings - Fork 214
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix TOC
on Desktop & Mobile
#1129
Fix TOC
on Desktop & Mobile
#1129
Conversation
function slideFade( | ||
node: HTMLElement, | ||
{ | ||
delay = 0, | ||
duration = 400, | ||
easing = cubicOut | ||
}: { delay?: number; duration?: number; easing?: (t: number) => number } = {} | ||
) { | ||
const initialHeight = node.offsetHeight; | ||
|
||
return { | ||
delay, | ||
duration, | ||
easing, | ||
css: (t: number) => { | ||
return ` | ||
opacity: ${t}; | ||
height: ${t * initialHeight}px; | ||
overflow: hidden; | ||
`; | ||
} | ||
}; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we also do this animation with CSS? I think that would better fit the direction we're moving in. Wdyt @thejessewinton?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure if we probably can (due to t * initialHeight
, but correct me if I am wrong), but I think I've seen a similar use-case somewhere around the repo. Lmk what we decide.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ping @ernstmul @thejessewinton.
What does this PR do?
As per the discussions, TOC should not show on desktops. Also fixes broken on mobile.
Test Plan
Manual.
Related PRs and Issues
N/A.
Have you read the Contributing Guidelines on issues?
Yes.