handoff.mjs 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. import { appearAnimationStore } from './store.mjs';
  2. import { appearStoreId } from './store-id.mjs';
  3. function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
  4. const storeId = appearStoreId(elementId, valueName);
  5. const optimisedAnimation = appearAnimationStore.get(storeId);
  6. if (!optimisedAnimation) {
  7. return null;
  8. }
  9. const { animation, startTime } = optimisedAnimation;
  10. function cancelAnimation() {
  11. window.MotionCancelOptimisedAnimation?.(elementId, valueName, frame);
  12. }
  13. /**
  14. * We can cancel the animation once it's finished now that we've synced
  15. * with Motion.
  16. *
  17. * Prefer onfinish over finished as onfinish is backwards compatible with
  18. * older browsers.
  19. */
  20. animation.onfinish = cancelAnimation;
  21. if (startTime === null || window.MotionHandoffIsComplete?.(elementId)) {
  22. /**
  23. * If the startTime is null, this animation is the Paint Ready detection animation
  24. * and we can cancel it immediately without handoff.
  25. *
  26. * Or if we've already handed off the animation then we're now interrupting it.
  27. * In which case we need to cancel it.
  28. */
  29. cancelAnimation();
  30. return null;
  31. }
  32. else {
  33. return startTime;
  34. }
  35. }
  36. export { handoffOptimizedAppearAnimation };