72 lines
2.5 KiB
JavaScript
72 lines
2.5 KiB
JavaScript
|
import { appearStoreId } from './store-id.mjs';
|
||
|
|
import { animateStyle } from '../animators/waapi/index.mjs';
|
||
|
|
import { optimizedAppearDataId } from './data-id.mjs';
|
||
|
|
import { handoffOptimizedAppearAnimation } from './handoff.mjs';
|
||
|
|
import { appearAnimationStore } from './store.mjs';
|
||
|
|
import { noop } from '../../utils/noop.mjs';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* A single time to use across all animations to manually set startTime
|
||
|
|
* and ensure they're all in sync.
|
||
|
|
*/
|
||
|
|
let startFrameTime;
|
||
|
|
/**
|
||
|
|
* A dummy animation to detect when Chrome is ready to start
|
||
|
|
* painting the page and hold off from triggering the real animation
|
||
|
|
* until then. We only need one animation to detect paint ready.
|
||
|
|
*
|
||
|
|
* https://bugs.chromium.org/p/chromium/issues/detail?id=1406850
|
||
|
|
*/
|
||
|
|
let readyAnimation;
|
||
|
|
function startOptimizedAppearAnimation(element, name, keyframes, options, onReady) {
|
||
|
|
// Prevent optimised appear animations if Motion has already started animating.
|
||
|
|
if (window.HandoffComplete) {
|
||
|
|
window.HandoffAppearAnimations = undefined;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const id = element.dataset[optimizedAppearDataId];
|
||
|
|
if (!id)
|
||
|
|
return;
|
||
|
|
window.HandoffAppearAnimations = handoffOptimizedAppearAnimation;
|
||
|
|
const storeId = appearStoreId(id, name);
|
||
|
|
if (!readyAnimation) {
|
||
|
|
readyAnimation = animateStyle(element, name, [keyframes[0], keyframes[0]],
|
||
|
|
/**
|
||
|
|
* 10 secs is basically just a super-safe duration to give Chrome
|
||
|
|
* long enough to get the animation ready.
|
||
|
|
*/
|
||
|
|
{ duration: 10000, ease: "linear" });
|
||
|
|
appearAnimationStore.set(storeId, {
|
||
|
|
animation: readyAnimation,
|
||
|
|
startTime: null,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
const startAnimation = () => {
|
||
|
|
readyAnimation.cancel();
|
||
|
|
const appearAnimation = animateStyle(element, name, keyframes, options);
|
||
|
|
/**
|
||
|
|
* Record the time of the first started animation. We call performance.now() once
|
||
|
|
* here and once in handoff to ensure we're getting
|
||
|
|
* close to a frame-locked time. This keeps all animations in sync.
|
||
|
|
*/
|
||
|
|
if (startFrameTime === undefined) {
|
||
|
|
startFrameTime = performance.now();
|
||
|
|
}
|
||
|
|
appearAnimation.startTime = startFrameTime;
|
||
|
|
appearAnimationStore.set(storeId, {
|
||
|
|
animation: appearAnimation,
|
||
|
|
startTime: startFrameTime,
|
||
|
|
});
|
||
|
|
if (onReady)
|
||
|
|
onReady(appearAnimation);
|
||
|
|
};
|
||
|
|
if (readyAnimation.ready) {
|
||
|
|
readyAnimation.ready.then(startAnimation).catch(noop);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
startAnimation();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export { startOptimizedAppearAnimation };
|