animate.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. export function animateTo(el, keyframes, options) {
  2. return new Promise(async (resolve) => {
  3. if ((options === null || options === void 0 ? void 0 : options.duration) === Infinity) {
  4. throw new Error('Promise-based animations must be finite.');
  5. }
  6. const animation = el.animate(keyframes, Object.assign(Object.assign({}, options), { duration: prefersReducedMotion() ? 0 : options.duration }));
  7. animation.addEventListener('cancel', resolve, { once: true });
  8. animation.addEventListener('finish', resolve, { once: true });
  9. });
  10. }
  11. export function parseDuration(delay) {
  12. delay = (delay + '').toLowerCase();
  13. if (delay.indexOf('ms') > -1) {
  14. return parseFloat(delay);
  15. }
  16. if (delay.indexOf('s') > -1) {
  17. return parseFloat(delay) * 1000;
  18. }
  19. return parseFloat(delay);
  20. }
  21. export function prefersReducedMotion() {
  22. const query = window.matchMedia('(prefers-reduced-motion: reduce)');
  23. return query === null || query === void 0 ? void 0 : query.matches;
  24. }
  25. export function stopAnimations(el) {
  26. return Promise.all(el.getAnimations().map((animation) => {
  27. return new Promise(resolve => {
  28. const handleAnimationEvent = requestAnimationFrame(resolve);
  29. animation.addEventListener('cancel', () => handleAnimationEvent, { once: true });
  30. animation.addEventListener('finish', () => handleAnimationEvent, { once: true });
  31. animation.cancel();
  32. });
  33. }));
  34. }
  35. export function shimKeyframesHeightAuto(keyframes, calculatedHeight) {
  36. return keyframes.map(keyframe => Object.assign({}, keyframe, {
  37. height: keyframe.height === 'auto' ? `${calculatedHeight}px` : keyframe.height
  38. }));
  39. }