| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- import { noop } from 'motion-utils';
- import { addToQueue } from './queue.mjs';
- class ViewTransitionBuilder {
- constructor(update, options = {}) {
- this.currentTarget = "root";
- this.targets = new Map();
- this.notifyReady = noop;
- this.readyPromise = new Promise((resolve) => {
- this.notifyReady = resolve;
- });
- this.update = update;
- this.options = {
- interrupt: "wait",
- ...options,
- };
- addToQueue(this);
- }
- get(selector) {
- this.currentTarget = selector;
- return this;
- }
- layout(keyframes, options) {
- this.updateTarget("layout", keyframes, options);
- return this;
- }
- new(keyframes, options) {
- this.updateTarget("new", keyframes, options);
- return this;
- }
- old(keyframes, options) {
- this.updateTarget("old", keyframes, options);
- return this;
- }
- enter(keyframes, options) {
- this.updateTarget("enter", keyframes, options);
- return this;
- }
- exit(keyframes, options) {
- this.updateTarget("exit", keyframes, options);
- return this;
- }
- crossfade(options) {
- this.updateTarget("enter", { opacity: 1 }, options);
- this.updateTarget("exit", { opacity: 0 }, options);
- return this;
- }
- updateTarget(target, keyframes, options = {}) {
- const { currentTarget, targets } = this;
- if (!targets.has(currentTarget)) {
- targets.set(currentTarget, {});
- }
- const targetData = targets.get(currentTarget);
- targetData[target] = { keyframes, options };
- }
- then(resolve, reject) {
- return this.readyPromise.then(resolve, reject);
- }
- }
- function animateView(update, defaultOptions = {}) {
- return new ViewTransitionBuilder(update, defaultOptions);
- }
- export { ViewTransitionBuilder, animateView };
|