index.mjs 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. import { noop } from 'motion-utils';
  2. import { addToQueue } from './queue.mjs';
  3. class ViewTransitionBuilder {
  4. constructor(update, options = {}) {
  5. this.currentTarget = "root";
  6. this.targets = new Map();
  7. this.notifyReady = noop;
  8. this.readyPromise = new Promise((resolve) => {
  9. this.notifyReady = resolve;
  10. });
  11. this.update = update;
  12. this.options = {
  13. interrupt: "wait",
  14. ...options,
  15. };
  16. addToQueue(this);
  17. }
  18. get(selector) {
  19. this.currentTarget = selector;
  20. return this;
  21. }
  22. layout(keyframes, options) {
  23. this.updateTarget("layout", keyframes, options);
  24. return this;
  25. }
  26. new(keyframes, options) {
  27. this.updateTarget("new", keyframes, options);
  28. return this;
  29. }
  30. old(keyframes, options) {
  31. this.updateTarget("old", keyframes, options);
  32. return this;
  33. }
  34. enter(keyframes, options) {
  35. this.updateTarget("enter", keyframes, options);
  36. return this;
  37. }
  38. exit(keyframes, options) {
  39. this.updateTarget("exit", keyframes, options);
  40. return this;
  41. }
  42. crossfade(options) {
  43. this.updateTarget("enter", { opacity: 1 }, options);
  44. this.updateTarget("exit", { opacity: 0 }, options);
  45. return this;
  46. }
  47. updateTarget(target, keyframes, options = {}) {
  48. const { currentTarget, targets } = this;
  49. if (!targets.has(currentTarget)) {
  50. targets.set(currentTarget, {});
  51. }
  52. const targetData = targets.get(currentTarget);
  53. targetData[target] = { keyframes, options };
  54. }
  55. then(resolve, reject) {
  56. return this.readyPromise.then(resolve, reject);
  57. }
  58. }
  59. function animateView(update, defaultOptions = {}) {
  60. return new ViewTransitionBuilder(update, defaultOptions);
  61. }
  62. export { ViewTransitionBuilder, animateView };