animation.mjs 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. // Utilities
  2. import { Box } from "./box.mjs";
  3. /** @see https://stackoverflow.com/a/57876601/2074736 */
  4. export function nullifyTransforms(el) {
  5. const rect = el.getBoundingClientRect();
  6. const style = getComputedStyle(el);
  7. const tx = style.transform;
  8. if (tx) {
  9. let ta, sx, sy, dx, dy;
  10. if (tx.startsWith('matrix3d(')) {
  11. ta = tx.slice(9, -1).split(/, /);
  12. sx = +ta[0];
  13. sy = +ta[5];
  14. dx = +ta[12];
  15. dy = +ta[13];
  16. } else if (tx.startsWith('matrix(')) {
  17. ta = tx.slice(7, -1).split(/, /);
  18. sx = +ta[0];
  19. sy = +ta[3];
  20. dx = +ta[4];
  21. dy = +ta[5];
  22. } else {
  23. return new Box(rect);
  24. }
  25. const to = style.transformOrigin;
  26. const x = rect.x - dx - (1 - sx) * parseFloat(to);
  27. const y = rect.y - dy - (1 - sy) * parseFloat(to.slice(to.indexOf(' ') + 1));
  28. const w = sx ? rect.width / sx : el.offsetWidth + 1;
  29. const h = sy ? rect.height / sy : el.offsetHeight + 1;
  30. return new Box({
  31. x,
  32. y,
  33. width: w,
  34. height: h
  35. });
  36. } else {
  37. return new Box(rect);
  38. }
  39. }
  40. export function animate(el, keyframes, options) {
  41. if (typeof el.animate === 'undefined') return {
  42. finished: Promise.resolve()
  43. };
  44. let animation;
  45. try {
  46. animation = el.animate(keyframes, options);
  47. } catch (err) {
  48. return {
  49. finished: Promise.resolve()
  50. };
  51. }
  52. if (typeof animation.finished === 'undefined') {
  53. animation.finished = new Promise(resolve => {
  54. animation.onfinish = () => {
  55. resolve(animation);
  56. };
  57. });
  58. }
  59. return animation;
  60. }
  61. //# sourceMappingURL=animation.mjs.map