74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import { log, LoggingDomain } from '@/Logging'
|
|
|
|
const ENTRANCE_DURATION = 200
|
|
const EXIT_DURATION = 200
|
|
|
|
export async function animatePaneEntranceTransitionFromOffscreenToTheRight(elementId: string): Promise<void> {
|
|
log(LoggingDomain.Panes, 'Animating pane entrance transition from offscreen to the right', elementId)
|
|
const element = document.getElementById(elementId)
|
|
if (!element) {
|
|
return
|
|
}
|
|
|
|
const animation = element.animate(
|
|
[
|
|
{
|
|
transform: 'translateX(100%)',
|
|
},
|
|
{
|
|
transform: 'translateX(0)',
|
|
},
|
|
],
|
|
{
|
|
duration: ENTRANCE_DURATION,
|
|
easing: 'ease-in-out',
|
|
fill: 'both',
|
|
},
|
|
)
|
|
|
|
await animation.finished
|
|
|
|
performSafariAnimationFix(element)
|
|
}
|
|
|
|
export async function animatePaneExitTransitionOffscreenToTheRight(elementId: string): Promise<void> {
|
|
log(LoggingDomain.Panes, 'Animating pane exit transition offscreen to the right', elementId)
|
|
const element = document.getElementById(elementId)
|
|
if (!element) {
|
|
return
|
|
}
|
|
|
|
const animation = element.animate(
|
|
[
|
|
{
|
|
transform: 'translateX(100%)',
|
|
},
|
|
],
|
|
{
|
|
duration: EXIT_DURATION,
|
|
easing: 'ease-in-out',
|
|
fill: 'both',
|
|
},
|
|
)
|
|
|
|
await animation.finished
|
|
}
|
|
|
|
/**
|
|
* Safari has a bug where animations don't properly commit sometimes and a tap on the screen or click anywhere fixes it.
|
|
* The workaround here is just to get Safari to recompute the element layout. This issue manifests itself when selecting
|
|
* a Daily Notebook tag from navigation whereby two pane animations are simulatensouly triggered (the items panel, then
|
|
* the editor panel), causing Safari to get tripped up.
|
|
*/
|
|
export function performSafariAnimationFix(element: HTMLElement): void {
|
|
const isSafari = /Safari/.test(navigator.userAgent) || /AppleWebKit/.test(navigator.userAgent)
|
|
if (!isSafari) {
|
|
return
|
|
}
|
|
|
|
element.style.opacity = '0.999'
|
|
setTimeout(() => {
|
|
element.style.opacity = '1.0'
|
|
}, 0)
|
|
}
|