motion 12.27.3-alpha.2 → 12.27.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/motion.dev.js +305 -271
- package/dist/motion.js +1 -1
- package/package.json +3 -3
package/dist/motion.dev.js
CHANGED
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
/*#__NO_SIDE_EFFECTS__*/
|
|
84
|
-
const noop
|
|
84
|
+
const noop = (any) => any;
|
|
85
85
|
|
|
86
86
|
/**
|
|
87
87
|
* Pipe
|
|
@@ -227,7 +227,7 @@
|
|
|
227
227
|
function cubicBezier(mX1, mY1, mX2, mY2) {
|
|
228
228
|
// If this is a linear gradient, return linear easing
|
|
229
229
|
if (mX1 === mY1 && mX2 === mY2)
|
|
230
|
-
return noop
|
|
230
|
+
return noop;
|
|
231
231
|
const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
|
|
232
232
|
// If animation is at start/end, return t without easing
|
|
233
233
|
return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
|
|
@@ -278,7 +278,7 @@
|
|
|
278
278
|
const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
|
|
279
279
|
|
|
280
280
|
const easingLookup = {
|
|
281
|
-
linear: noop
|
|
281
|
+
linear: noop,
|
|
282
282
|
easeIn,
|
|
283
283
|
easeInOut,
|
|
284
284
|
easeOut,
|
|
@@ -479,7 +479,7 @@
|
|
|
479
479
|
return { schedule, cancel, state, steps };
|
|
480
480
|
}
|
|
481
481
|
|
|
482
|
-
const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop
|
|
482
|
+
const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
|
|
483
483
|
|
|
484
484
|
let now;
|
|
485
485
|
function clearTime() {
|
|
@@ -1429,7 +1429,7 @@
|
|
|
1429
1429
|
for (let i = 0; i < numMixers; i++) {
|
|
1430
1430
|
let mixer = mixerFactory(output[i], output[i + 1]);
|
|
1431
1431
|
if (ease) {
|
|
1432
|
-
const easingFunction = Array.isArray(ease) ? ease[i] || noop
|
|
1432
|
+
const easingFunction = Array.isArray(ease) ? ease[i] || noop : ease;
|
|
1433
1433
|
mixer = pipe(easingFunction, mixer);
|
|
1434
1434
|
}
|
|
1435
1435
|
mixers.push(mixer);
|
|
@@ -2491,7 +2491,7 @@
|
|
|
2491
2491
|
this.animation.onfinish = null;
|
|
2492
2492
|
if (timeline && supportsScrollTimeline()) {
|
|
2493
2493
|
this.animation.timeline = timeline;
|
|
2494
|
-
return noop
|
|
2494
|
+
return noop;
|
|
2495
2495
|
}
|
|
2496
2496
|
else {
|
|
2497
2497
|
return observe(this);
|
|
@@ -2783,7 +2783,7 @@
|
|
|
2783
2783
|
: new JSAnimation(resolvedOptions);
|
|
2784
2784
|
animation.finished.then(() => {
|
|
2785
2785
|
this.notifyFinished();
|
|
2786
|
-
}).catch(noop
|
|
2786
|
+
}).catch(noop);
|
|
2787
2787
|
if (this.pendingTimeline) {
|
|
2788
2788
|
this.stopTimeline = animation.attachTimeline(this.pendingTimeline);
|
|
2789
2789
|
this.pendingTimeline = undefined;
|
|
@@ -5402,7 +5402,7 @@
|
|
|
5402
5402
|
constructor(update, options = {}) {
|
|
5403
5403
|
this.currentSubject = "root";
|
|
5404
5404
|
this.targets = new Map();
|
|
5405
|
-
this.notifyReady = noop
|
|
5405
|
+
this.notifyReady = noop;
|
|
5406
5406
|
this.readyPromise = new Promise((resolve) => {
|
|
5407
5407
|
this.notifyReady = resolve;
|
|
5408
5408
|
});
|
|
@@ -7457,7 +7457,7 @@
|
|
|
7457
7457
|
: values.borderRadius;
|
|
7458
7458
|
}
|
|
7459
7459
|
const easeCrossfadeIn = /*@__PURE__*/ compress(0, 0.5, circOut);
|
|
7460
|
-
const easeCrossfadeOut = /*@__PURE__*/ compress(0.5, 0.95, noop
|
|
7460
|
+
const easeCrossfadeOut = /*@__PURE__*/ compress(0.5, 0.95, noop);
|
|
7461
7461
|
function compress(min, max, easing) {
|
|
7462
7462
|
return (p) => {
|
|
7463
7463
|
// Could replace ifs with clamp
|
|
@@ -7575,13 +7575,6 @@
|
|
|
7575
7575
|
const prevLead = this.lead;
|
|
7576
7576
|
if (node === prevLead)
|
|
7577
7577
|
return;
|
|
7578
|
-
console.log("[projection] promote", {
|
|
7579
|
-
layoutId: node.options.layoutId,
|
|
7580
|
-
node: node.id,
|
|
7581
|
-
prevLead: prevLead?.id,
|
|
7582
|
-
prevLeadSnapshot: Boolean(prevLead?.snapshot),
|
|
7583
|
-
prevLeadResumeFrom: Boolean(prevLead?.resumeFrom),
|
|
7584
|
-
});
|
|
7585
7578
|
this.prevLead = prevLead;
|
|
7586
7579
|
this.lead = node;
|
|
7587
7580
|
node.show();
|
|
@@ -7690,7 +7683,7 @@
|
|
|
7690
7683
|
cancelTreeOptimisedTransformAnimations(parent);
|
|
7691
7684
|
}
|
|
7692
7685
|
}
|
|
7693
|
-
function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
|
|
7686
|
+
function createProjectionNode$1({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
|
|
7694
7687
|
return class ProjectionNode {
|
|
7695
7688
|
constructor(latestValues = {}, parent = defaultParent?.()) {
|
|
7696
7689
|
/**
|
|
@@ -9228,7 +9221,7 @@
|
|
|
9228
9221
|
*/
|
|
9229
9222
|
const roundPoint = userAgentContains("applewebkit/") && !userAgentContains("chrome/")
|
|
9230
9223
|
? Math.round
|
|
9231
|
-
: noop
|
|
9224
|
+
: noop;
|
|
9232
9225
|
function roundAxis(axis) {
|
|
9233
9226
|
// Round to the nearest .5 pixels to support subpixel layouts
|
|
9234
9227
|
axis.min = roundPoint(axis.min);
|
|
@@ -9247,7 +9240,7 @@
|
|
|
9247
9240
|
return node !== node.root && node.scroll?.wasRoot;
|
|
9248
9241
|
}
|
|
9249
9242
|
|
|
9250
|
-
const DocumentProjectionNode = createProjectionNode({
|
|
9243
|
+
const DocumentProjectionNode = createProjectionNode$1({
|
|
9251
9244
|
attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),
|
|
9252
9245
|
measureScroll: () => ({
|
|
9253
9246
|
x: document.documentElement.scrollLeft || document.body.scrollLeft,
|
|
@@ -9282,7 +9275,7 @@
|
|
|
9282
9275
|
const rootProjectionNode = {
|
|
9283
9276
|
current: undefined,
|
|
9284
9277
|
};
|
|
9285
|
-
const HTMLProjectionNode = createProjectionNode({
|
|
9278
|
+
const HTMLProjectionNode = createProjectionNode$1({
|
|
9286
9279
|
measureScroll: (instance) => ({
|
|
9287
9280
|
x: instance.scrollLeft,
|
|
9288
9281
|
y: instance.scrollTop,
|
|
@@ -9302,160 +9295,315 @@
|
|
|
9302
9295
|
checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed"),
|
|
9303
9296
|
});
|
|
9304
9297
|
|
|
9305
|
-
const
|
|
9306
|
-
|
|
9307
|
-
|
|
9308
|
-
|
|
9309
|
-
if (
|
|
9310
|
-
|
|
9311
|
-
|
|
9312
|
-
|
|
9313
|
-
|
|
9314
|
-
|
|
9298
|
+
const LAYOUT_SELECTOR = "[data-layout], [data-layout-id]";
|
|
9299
|
+
function getLayoutElements(scope) {
|
|
9300
|
+
const elements = Array.from(scope.querySelectorAll(LAYOUT_SELECTOR));
|
|
9301
|
+
// Include scope itself if it's an Element (not Document) and has layout attributes
|
|
9302
|
+
if (scope instanceof Element && hasLayout(scope)) {
|
|
9303
|
+
elements.unshift(scope);
|
|
9304
|
+
}
|
|
9305
|
+
return elements;
|
|
9306
|
+
}
|
|
9307
|
+
function getLayoutId(element) {
|
|
9308
|
+
return element.getAttribute("data-layout-id");
|
|
9309
|
+
}
|
|
9310
|
+
function hasLayout(element) {
|
|
9311
|
+
return (element.hasAttribute("data-layout") ||
|
|
9312
|
+
element.hasAttribute("data-layout-id"));
|
|
9313
|
+
}
|
|
9314
|
+
|
|
9315
|
+
let scaleCorrectorAdded = false;
|
|
9316
|
+
/**
|
|
9317
|
+
* Track active projection nodes per element to handle animation interruption.
|
|
9318
|
+
* When a new animation starts on an element that already has an active animation,
|
|
9319
|
+
* we need to stop the old animation so the new one can start from the current
|
|
9320
|
+
* visual position.
|
|
9321
|
+
*/
|
|
9322
|
+
const activeProjectionNodes = new WeakMap();
|
|
9323
|
+
function ensureScaleCorrectors() {
|
|
9324
|
+
if (scaleCorrectorAdded)
|
|
9325
|
+
return;
|
|
9326
|
+
scaleCorrectorAdded = true;
|
|
9327
|
+
addScaleCorrector({
|
|
9328
|
+
borderRadius: {
|
|
9329
|
+
...correctBorderRadius,
|
|
9330
|
+
applyTo: [
|
|
9331
|
+
"borderTopLeftRadius",
|
|
9332
|
+
"borderTopRightRadius",
|
|
9333
|
+
"borderBottomLeftRadius",
|
|
9334
|
+
"borderBottomRightRadius",
|
|
9335
|
+
],
|
|
9336
|
+
},
|
|
9337
|
+
borderTopLeftRadius: correctBorderRadius,
|
|
9338
|
+
borderTopRightRadius: correctBorderRadius,
|
|
9339
|
+
borderBottomLeftRadius: correctBorderRadius,
|
|
9340
|
+
borderBottomRightRadius: correctBorderRadius,
|
|
9341
|
+
boxShadow: correctBoxShadow,
|
|
9342
|
+
});
|
|
9343
|
+
}
|
|
9344
|
+
/**
|
|
9345
|
+
* Get DOM depth of an element
|
|
9346
|
+
*/
|
|
9347
|
+
function getDepth(element) {
|
|
9348
|
+
let depth = 0;
|
|
9349
|
+
let current = element.parentElement;
|
|
9350
|
+
while (current) {
|
|
9351
|
+
depth++;
|
|
9352
|
+
current = current.parentElement;
|
|
9353
|
+
}
|
|
9354
|
+
return depth;
|
|
9355
|
+
}
|
|
9356
|
+
/**
|
|
9357
|
+
* Find the closest projection parent for an element
|
|
9358
|
+
*/
|
|
9359
|
+
function findProjectionParent(element, nodeCache) {
|
|
9360
|
+
let parent = element.parentElement;
|
|
9361
|
+
while (parent) {
|
|
9362
|
+
const node = nodeCache.get(parent);
|
|
9363
|
+
if (node)
|
|
9364
|
+
return node;
|
|
9365
|
+
parent = parent.parentElement;
|
|
9366
|
+
}
|
|
9367
|
+
return undefined;
|
|
9368
|
+
}
|
|
9369
|
+
/**
|
|
9370
|
+
* Create or reuse a projection node for an element
|
|
9371
|
+
*/
|
|
9372
|
+
function createProjectionNode(element, parent, options, transition) {
|
|
9373
|
+
// Check for existing active node - reuse it to preserve animation state
|
|
9374
|
+
const existingNode = activeProjectionNodes.get(element);
|
|
9375
|
+
if (existingNode) {
|
|
9376
|
+
const visualElement = existingNode.options.visualElement;
|
|
9377
|
+
// Update transition options for the new animation
|
|
9378
|
+
const nodeTransition = transition
|
|
9379
|
+
? { duration: transition.duration, ease: transition.ease }
|
|
9380
|
+
: { duration: 0.3, ease: "easeOut" };
|
|
9381
|
+
existingNode.setOptions({
|
|
9382
|
+
...existingNode.options,
|
|
9383
|
+
animate: true,
|
|
9384
|
+
transition: nodeTransition,
|
|
9385
|
+
...options,
|
|
9386
|
+
});
|
|
9387
|
+
// Re-mount the node if it was previously unmounted
|
|
9388
|
+
// This re-adds it to root.nodes so didUpdate() will process it
|
|
9389
|
+
if (!existingNode.instance) {
|
|
9390
|
+
existingNode.mount(element);
|
|
9391
|
+
}
|
|
9392
|
+
return { node: existingNode, visualElement };
|
|
9393
|
+
}
|
|
9394
|
+
// No existing node - create a new one
|
|
9395
|
+
const latestValues = {};
|
|
9396
|
+
const visualElement = new HTMLVisualElement({
|
|
9397
|
+
visualState: {
|
|
9398
|
+
latestValues,
|
|
9399
|
+
renderState: {
|
|
9400
|
+
transformOrigin: {},
|
|
9401
|
+
transform: {},
|
|
9402
|
+
style: {},
|
|
9403
|
+
vars: {},
|
|
9404
|
+
},
|
|
9405
|
+
},
|
|
9406
|
+
presenceContext: null,
|
|
9407
|
+
props: {},
|
|
9408
|
+
});
|
|
9409
|
+
const node = new HTMLProjectionNode(latestValues, parent);
|
|
9410
|
+
// Convert AnimationOptions to transition format for the projection system
|
|
9411
|
+
const nodeTransition = transition
|
|
9412
|
+
? { duration: transition.duration, ease: transition.ease }
|
|
9413
|
+
: { duration: 0.3, ease: "easeOut" };
|
|
9414
|
+
node.setOptions({
|
|
9415
|
+
visualElement,
|
|
9416
|
+
layout: true,
|
|
9417
|
+
animate: true,
|
|
9418
|
+
transition: nodeTransition,
|
|
9419
|
+
...options,
|
|
9420
|
+
});
|
|
9421
|
+
node.mount(element);
|
|
9422
|
+
visualElement.projection = node;
|
|
9423
|
+
// Track this node as the active one for this element
|
|
9424
|
+
activeProjectionNodes.set(element, node);
|
|
9425
|
+
return { node, visualElement };
|
|
9426
|
+
}
|
|
9427
|
+
/**
|
|
9428
|
+
* Build a projection tree from a list of elements
|
|
9429
|
+
*/
|
|
9430
|
+
function buildProjectionTree(elements, existingContext, options) {
|
|
9431
|
+
ensureScaleCorrectors();
|
|
9432
|
+
const nodes = existingContext?.nodes ?? new Map();
|
|
9433
|
+
const visualElements = existingContext?.visualElements ?? new Map();
|
|
9434
|
+
const group = existingContext?.group ?? nodeGroup();
|
|
9435
|
+
const defaultTransition = options?.defaultTransition;
|
|
9436
|
+
const sharedTransitions = options?.sharedTransitions;
|
|
9437
|
+
// Sort elements by DOM depth (parents before children)
|
|
9438
|
+
const sorted = [...elements].sort((a, b) => getDepth(a) - getDepth(b));
|
|
9439
|
+
let root = existingContext?.root;
|
|
9440
|
+
for (const element of sorted) {
|
|
9441
|
+
// Skip if already has a node
|
|
9442
|
+
if (nodes.has(element))
|
|
9443
|
+
continue;
|
|
9444
|
+
const parent = findProjectionParent(element, nodes);
|
|
9445
|
+
const layoutId = getLayoutId(element);
|
|
9446
|
+
const layoutMode = element.getAttribute("data-layout");
|
|
9447
|
+
const nodeOptions = {
|
|
9448
|
+
layoutId: layoutId ?? undefined,
|
|
9449
|
+
animationType: parseLayoutMode(layoutMode),
|
|
9450
|
+
};
|
|
9451
|
+
// Use layoutId-specific transition if available, otherwise use default
|
|
9452
|
+
const transition = layoutId && sharedTransitions?.get(layoutId)
|
|
9453
|
+
? sharedTransitions.get(layoutId)
|
|
9454
|
+
: defaultTransition;
|
|
9455
|
+
const { node, visualElement } = createProjectionNode(element, parent, nodeOptions, transition);
|
|
9456
|
+
nodes.set(element, node);
|
|
9457
|
+
visualElements.set(element, visualElement);
|
|
9458
|
+
group.add(node);
|
|
9459
|
+
if (!root) {
|
|
9460
|
+
root = node.root;
|
|
9461
|
+
}
|
|
9462
|
+
}
|
|
9315
9463
|
return {
|
|
9316
|
-
|
|
9317
|
-
|
|
9318
|
-
|
|
9319
|
-
|
|
9320
|
-
source: projection.id,
|
|
9464
|
+
nodes,
|
|
9465
|
+
visualElements,
|
|
9466
|
+
group,
|
|
9467
|
+
root: root,
|
|
9321
9468
|
};
|
|
9322
9469
|
}
|
|
9470
|
+
/**
|
|
9471
|
+
* Parse the data-layout attribute value
|
|
9472
|
+
*/
|
|
9473
|
+
function parseLayoutMode(value) {
|
|
9474
|
+
if (value === "position")
|
|
9475
|
+
return "position";
|
|
9476
|
+
if (value === "size")
|
|
9477
|
+
return "size";
|
|
9478
|
+
if (value === "preserve-aspect")
|
|
9479
|
+
return "preserve-aspect";
|
|
9480
|
+
return "both";
|
|
9481
|
+
}
|
|
9482
|
+
/**
|
|
9483
|
+
* Clean up projection nodes for specific elements.
|
|
9484
|
+
* If elementsToCleanup is provided, only those elements are cleaned up.
|
|
9485
|
+
* If not provided, all nodes are cleaned up.
|
|
9486
|
+
*
|
|
9487
|
+
* This allows persisting elements to keep their nodes between animations,
|
|
9488
|
+
* matching React's behavior where nodes persist for elements that remain in the DOM.
|
|
9489
|
+
*/
|
|
9490
|
+
function cleanupProjectionTree(context, elementsToCleanup) {
|
|
9491
|
+
const elementsToProcess = elementsToCleanup
|
|
9492
|
+
? [...context.nodes.entries()].filter(([el]) => elementsToCleanup.has(el))
|
|
9493
|
+
: [...context.nodes.entries()];
|
|
9494
|
+
for (const [element, node] of elementsToProcess) {
|
|
9495
|
+
context.group.remove(node);
|
|
9496
|
+
node.unmount();
|
|
9497
|
+
// Only clear from activeProjectionNodes if this is still the active node.
|
|
9498
|
+
// A newer animation might have already taken over.
|
|
9499
|
+
if (activeProjectionNodes.get(element) === node) {
|
|
9500
|
+
activeProjectionNodes.delete(element);
|
|
9501
|
+
}
|
|
9502
|
+
context.nodes.delete(element);
|
|
9503
|
+
context.visualElements.delete(element);
|
|
9504
|
+
}
|
|
9505
|
+
}
|
|
9506
|
+
|
|
9323
9507
|
class LayoutAnimationBuilder {
|
|
9324
9508
|
constructor(scope, updateDom, defaultOptions) {
|
|
9325
9509
|
this.sharedTransitions = new Map();
|
|
9326
9510
|
this.notifyReady = noop;
|
|
9327
|
-
this.
|
|
9511
|
+
this.executed = false;
|
|
9328
9512
|
this.scope = scope;
|
|
9329
9513
|
this.updateDom = updateDom;
|
|
9330
9514
|
this.defaultOptions = defaultOptions;
|
|
9331
|
-
this.readyPromise = new Promise((resolve
|
|
9515
|
+
this.readyPromise = new Promise((resolve) => {
|
|
9332
9516
|
this.notifyReady = resolve;
|
|
9333
|
-
this.rejectReady = reject;
|
|
9334
|
-
});
|
|
9335
|
-
frame.postRender(() => {
|
|
9336
|
-
this.start().then(this.notifyReady).catch(this.rejectReady);
|
|
9337
9517
|
});
|
|
9518
|
+
// Queue execution on microtask to allow builder methods to be called
|
|
9519
|
+
queueMicrotask(() => this.execute());
|
|
9338
9520
|
}
|
|
9339
|
-
shared(id,
|
|
9340
|
-
this.sharedTransitions.set(id,
|
|
9521
|
+
shared(id, options) {
|
|
9522
|
+
this.sharedTransitions.set(id, options);
|
|
9341
9523
|
return this;
|
|
9342
9524
|
}
|
|
9343
|
-
then(
|
|
9344
|
-
return this.readyPromise.then(
|
|
9525
|
+
then(onfulfilled, onrejected) {
|
|
9526
|
+
return this.readyPromise.then(onfulfilled, onrejected);
|
|
9345
9527
|
}
|
|
9346
|
-
async
|
|
9347
|
-
|
|
9348
|
-
|
|
9349
|
-
|
|
9350
|
-
|
|
9351
|
-
|
|
9352
|
-
|
|
9353
|
-
|
|
9354
|
-
|
|
9355
|
-
|
|
9356
|
-
|
|
9357
|
-
|
|
9358
|
-
|
|
9359
|
-
|
|
9360
|
-
|
|
9361
|
-
|
|
9362
|
-
|
|
9363
|
-
|
|
9364
|
-
|
|
9365
|
-
|
|
9366
|
-
|
|
9367
|
-
|
|
9368
|
-
|
|
9369
|
-
|
|
9370
|
-
|
|
9371
|
-
|
|
9372
|
-
|
|
9373
|
-
|
|
9374
|
-
|
|
9375
|
-
|
|
9376
|
-
|
|
9377
|
-
if (!instance || !resumeFromInstance)
|
|
9378
|
-
return;
|
|
9379
|
-
if (!("style" in instance))
|
|
9380
|
-
return;
|
|
9381
|
-
const currentTransform = instance.style.transform;
|
|
9382
|
-
const resumeFromTransform = resumeFromInstance.style.transform;
|
|
9383
|
-
if (currentTransform &&
|
|
9384
|
-
resumeFromTransform &&
|
|
9385
|
-
currentTransform === resumeFromTransform) {
|
|
9386
|
-
instance.style.transform = "";
|
|
9387
|
-
instance.style.transformOrigin = "";
|
|
9388
|
-
}
|
|
9389
|
-
});
|
|
9390
|
-
afterRecords.forEach(({ projection }) => {
|
|
9391
|
-
projection.isPresent = true;
|
|
9392
|
-
});
|
|
9393
|
-
const root = getProjectionRoot(afterRecords, beforeRecords);
|
|
9394
|
-
root?.didUpdate();
|
|
9395
|
-
await new Promise((resolve) => {
|
|
9396
|
-
frame.postRender(() => resolve());
|
|
9397
|
-
});
|
|
9398
|
-
const animations = collectAnimations(afterRecords, exitRecords);
|
|
9399
|
-
const animation = new GroupAnimation(animations);
|
|
9400
|
-
if (exitRecords.length) {
|
|
9401
|
-
const cleanup = () => {
|
|
9402
|
-
exitRecords.forEach(({ element, visualElement }) => {
|
|
9403
|
-
if (element.isConnected) {
|
|
9404
|
-
element.remove();
|
|
9405
|
-
}
|
|
9406
|
-
visualElement.unmount();
|
|
9407
|
-
visualElementStore.delete(element);
|
|
9408
|
-
});
|
|
9409
|
-
};
|
|
9410
|
-
animation.finished.then(cleanup, cleanup);
|
|
9528
|
+
async execute() {
|
|
9529
|
+
if (this.executed)
|
|
9530
|
+
return;
|
|
9531
|
+
this.executed = true;
|
|
9532
|
+
let context;
|
|
9533
|
+
// Phase 1: Pre-mutation - Build projection tree and take snapshots
|
|
9534
|
+
const beforeElements = getLayoutElements(this.scope);
|
|
9535
|
+
if (beforeElements.length > 0) {
|
|
9536
|
+
context = buildProjectionTree(beforeElements, undefined, this.getBuildOptions());
|
|
9537
|
+
context.root.startUpdate();
|
|
9538
|
+
for (const node of context.nodes.values()) {
|
|
9539
|
+
node.isLayoutDirty = false;
|
|
9540
|
+
node.willUpdate();
|
|
9541
|
+
}
|
|
9542
|
+
}
|
|
9543
|
+
// Phase 2: Execute DOM update
|
|
9544
|
+
this.updateDom();
|
|
9545
|
+
// Phase 3: Post-mutation - Compare before/after elements
|
|
9546
|
+
const afterElements = getLayoutElements(this.scope);
|
|
9547
|
+
const beforeSet = new Set(beforeElements);
|
|
9548
|
+
const afterSet = new Set(afterElements);
|
|
9549
|
+
const entering = afterElements.filter((el) => !beforeSet.has(el));
|
|
9550
|
+
const exiting = beforeElements.filter((el) => !afterSet.has(el));
|
|
9551
|
+
// Build projection nodes for entering elements
|
|
9552
|
+
if (entering.length > 0) {
|
|
9553
|
+
context = buildProjectionTree(entering, context, this.getBuildOptions());
|
|
9554
|
+
}
|
|
9555
|
+
// No layout elements - return empty animation
|
|
9556
|
+
if (!context) {
|
|
9557
|
+
this.notifyReady(new GroupAnimation([]));
|
|
9558
|
+
return;
|
|
9411
9559
|
}
|
|
9412
|
-
|
|
9413
|
-
|
|
9414
|
-
|
|
9415
|
-
|
|
9416
|
-
const recordMap = new Map();
|
|
9417
|
-
for (const element of elements) {
|
|
9418
|
-
const parentRecord = findParentRecord(element, recordMap, this.scope);
|
|
9419
|
-
const { layout, layoutId } = readLayoutAttributes(element);
|
|
9420
|
-
const override = layoutId
|
|
9421
|
-
? this.sharedTransitions.get(layoutId)
|
|
9422
|
-
: undefined;
|
|
9423
|
-
const transition = override || this.defaultOptions;
|
|
9424
|
-
const record = getOrCreateRecord(element, parentRecord?.projection, {
|
|
9425
|
-
layout,
|
|
9426
|
-
layoutId,
|
|
9427
|
-
animationType: typeof layout === "string" ? layout : "both",
|
|
9428
|
-
transition: transition,
|
|
9429
|
-
});
|
|
9430
|
-
recordMap.set(element, record);
|
|
9431
|
-
records.push(record);
|
|
9560
|
+
// Handle shared elements
|
|
9561
|
+
for (const element of exiting) {
|
|
9562
|
+
const node = context.nodes.get(element);
|
|
9563
|
+
node?.getStack()?.remove(node);
|
|
9432
9564
|
}
|
|
9433
|
-
|
|
9434
|
-
|
|
9435
|
-
|
|
9436
|
-
|
|
9437
|
-
|
|
9438
|
-
|
|
9439
|
-
|
|
9440
|
-
|
|
9441
|
-
|
|
9442
|
-
|
|
9443
|
-
|
|
9444
|
-
|
|
9445
|
-
|
|
9446
|
-
|
|
9447
|
-
|
|
9448
|
-
|
|
9449
|
-
|
|
9450
|
-
|
|
9451
|
-
|
|
9452
|
-
|
|
9565
|
+
for (const element of entering) {
|
|
9566
|
+
context.nodes.get(element)?.promote();
|
|
9567
|
+
}
|
|
9568
|
+
// Phase 4: Animate
|
|
9569
|
+
context.root.didUpdate();
|
|
9570
|
+
await new Promise((resolve) => frame.postRender(() => resolve()));
|
|
9571
|
+
const animations = [];
|
|
9572
|
+
for (const node of context.nodes.values()) {
|
|
9573
|
+
if (node.currentAnimation) {
|
|
9574
|
+
animations.push(node.currentAnimation);
|
|
9575
|
+
}
|
|
9576
|
+
}
|
|
9577
|
+
const groupAnimation = new GroupAnimation(animations);
|
|
9578
|
+
groupAnimation.finished.then(() => {
|
|
9579
|
+
// Only clean up nodes for elements no longer in the document.
|
|
9580
|
+
// Elements still in DOM keep their nodes so subsequent animations
|
|
9581
|
+
// can use the stored position snapshots (A→B→A pattern).
|
|
9582
|
+
const elementsToCleanup = new Set();
|
|
9583
|
+
for (const element of context.nodes.keys()) {
|
|
9584
|
+
if (!document.contains(element)) {
|
|
9585
|
+
elementsToCleanup.add(element);
|
|
9586
|
+
}
|
|
9453
9587
|
}
|
|
9454
|
-
|
|
9588
|
+
cleanupProjectionTree(context, elementsToCleanup);
|
|
9455
9589
|
});
|
|
9456
|
-
|
|
9590
|
+
this.notifyReady(groupAnimation);
|
|
9591
|
+
}
|
|
9592
|
+
getBuildOptions() {
|
|
9593
|
+
return {
|
|
9594
|
+
defaultTransition: this.defaultOptions || {
|
|
9595
|
+
duration: 0.3,
|
|
9596
|
+
ease: "easeOut",
|
|
9597
|
+
},
|
|
9598
|
+
sharedTransitions: this.sharedTransitions.size > 0
|
|
9599
|
+
? this.sharedTransitions
|
|
9600
|
+
: undefined,
|
|
9601
|
+
};
|
|
9457
9602
|
}
|
|
9458
9603
|
}
|
|
9604
|
+
/**
|
|
9605
|
+
* Parse arguments for animateLayout overloads
|
|
9606
|
+
*/
|
|
9459
9607
|
function parseAnimateLayoutArgs(scopeOrUpdateDom, updateDomOrOptions, options) {
|
|
9460
9608
|
// animateLayout(updateDom)
|
|
9461
9609
|
if (typeof scopeOrUpdateDom === "function") {
|
|
@@ -9469,125 +9617,11 @@
|
|
|
9469
9617
|
const elements = resolveElements(scopeOrUpdateDom);
|
|
9470
9618
|
const scope = elements[0] || document;
|
|
9471
9619
|
return {
|
|
9472
|
-
scope,
|
|
9620
|
+
scope: scope instanceof Document ? scope : scope,
|
|
9473
9621
|
updateDom: updateDomOrOptions,
|
|
9474
9622
|
defaultOptions: options,
|
|
9475
9623
|
};
|
|
9476
9624
|
}
|
|
9477
|
-
function collectLayoutElements(scope) {
|
|
9478
|
-
const elements = Array.from(scope.querySelectorAll(layoutSelector));
|
|
9479
|
-
if (scope instanceof Element && scope.matches(layoutSelector)) {
|
|
9480
|
-
if (!elements.includes(scope)) {
|
|
9481
|
-
elements.unshift(scope);
|
|
9482
|
-
}
|
|
9483
|
-
}
|
|
9484
|
-
return elements;
|
|
9485
|
-
}
|
|
9486
|
-
function readLayoutAttributes(element) {
|
|
9487
|
-
const layoutId = element.getAttribute("data-layout-id") || undefined;
|
|
9488
|
-
const rawLayout = element.getAttribute("data-layout");
|
|
9489
|
-
let layout;
|
|
9490
|
-
if (rawLayout === "" || rawLayout === "true") {
|
|
9491
|
-
layout = true;
|
|
9492
|
-
}
|
|
9493
|
-
else if (rawLayout) {
|
|
9494
|
-
layout = rawLayout;
|
|
9495
|
-
}
|
|
9496
|
-
return {
|
|
9497
|
-
layout,
|
|
9498
|
-
layoutId,
|
|
9499
|
-
layoutExit: element.hasAttribute("data-layout-exit"),
|
|
9500
|
-
};
|
|
9501
|
-
}
|
|
9502
|
-
function createVisualState() {
|
|
9503
|
-
return {
|
|
9504
|
-
latestValues: {},
|
|
9505
|
-
renderState: {
|
|
9506
|
-
transform: {},
|
|
9507
|
-
transformOrigin: {},
|
|
9508
|
-
style: {},
|
|
9509
|
-
vars: {},
|
|
9510
|
-
},
|
|
9511
|
-
};
|
|
9512
|
-
}
|
|
9513
|
-
function getOrCreateRecord(element, parentProjection, projectionOptions) {
|
|
9514
|
-
const existing = visualElementStore.get(element);
|
|
9515
|
-
const visualElement = existing ??
|
|
9516
|
-
new HTMLVisualElement({
|
|
9517
|
-
props: {},
|
|
9518
|
-
presenceContext: null,
|
|
9519
|
-
visualState: createVisualState(),
|
|
9520
|
-
}, { allowProjection: true });
|
|
9521
|
-
if (!existing || !visualElement.projection) {
|
|
9522
|
-
visualElement.projection = new HTMLProjectionNode(visualElement.latestValues, parentProjection);
|
|
9523
|
-
}
|
|
9524
|
-
visualElement.projection.setOptions({
|
|
9525
|
-
...projectionOptions,
|
|
9526
|
-
visualElement,
|
|
9527
|
-
});
|
|
9528
|
-
if (!visualElement.current) {
|
|
9529
|
-
visualElement.mount(element);
|
|
9530
|
-
}
|
|
9531
|
-
if (!existing) {
|
|
9532
|
-
visualElementStore.set(element, visualElement);
|
|
9533
|
-
}
|
|
9534
|
-
return {
|
|
9535
|
-
element,
|
|
9536
|
-
visualElement,
|
|
9537
|
-
projection: visualElement.projection,
|
|
9538
|
-
};
|
|
9539
|
-
}
|
|
9540
|
-
function findParentRecord(element, recordMap, scope) {
|
|
9541
|
-
let parent = element.parentElement;
|
|
9542
|
-
while (parent) {
|
|
9543
|
-
const record = recordMap.get(parent);
|
|
9544
|
-
if (record)
|
|
9545
|
-
return record;
|
|
9546
|
-
if (parent === scope)
|
|
9547
|
-
break;
|
|
9548
|
-
parent = parent.parentElement;
|
|
9549
|
-
}
|
|
9550
|
-
return undefined;
|
|
9551
|
-
}
|
|
9552
|
-
function collectExitCandidates(records) {
|
|
9553
|
-
const exitCandidates = new Map();
|
|
9554
|
-
records.forEach((record) => {
|
|
9555
|
-
const { layoutExit } = readLayoutAttributes(record.element);
|
|
9556
|
-
if (!layoutExit)
|
|
9557
|
-
return;
|
|
9558
|
-
exitCandidates.set(record.element, {
|
|
9559
|
-
...record,
|
|
9560
|
-
parent: record.element.parentNode,
|
|
9561
|
-
nextSibling: record.element.nextSibling,
|
|
9562
|
-
});
|
|
9563
|
-
});
|
|
9564
|
-
return exitCandidates;
|
|
9565
|
-
}
|
|
9566
|
-
function reinstateExitElement(record) {
|
|
9567
|
-
if (!record.parent)
|
|
9568
|
-
return;
|
|
9569
|
-
if (record.nextSibling && record.nextSibling.parentNode === record.parent) {
|
|
9570
|
-
record.parent.insertBefore(record.element, record.nextSibling);
|
|
9571
|
-
}
|
|
9572
|
-
else {
|
|
9573
|
-
record.parent.appendChild(record.element);
|
|
9574
|
-
}
|
|
9575
|
-
}
|
|
9576
|
-
function getProjectionRoot(afterRecords, beforeRecords) {
|
|
9577
|
-
const record = afterRecords[0] || beforeRecords[0];
|
|
9578
|
-
return record?.projection.root;
|
|
9579
|
-
}
|
|
9580
|
-
function collectAnimations(afterRecords, exitRecords) {
|
|
9581
|
-
const animations = new Set();
|
|
9582
|
-
const addAnimation = (record) => {
|
|
9583
|
-
const animation = record.projection.currentAnimation;
|
|
9584
|
-
if (animation)
|
|
9585
|
-
animations.add(animation);
|
|
9586
|
-
};
|
|
9587
|
-
afterRecords.forEach(addAnimation);
|
|
9588
|
-
exitRecords.forEach(addAnimation);
|
|
9589
|
-
return Array.from(animations);
|
|
9590
|
-
}
|
|
9591
9625
|
|
|
9592
9626
|
/**
|
|
9593
9627
|
* @deprecated
|
|
@@ -10481,7 +10515,7 @@
|
|
|
10481
10515
|
const getEventTarget = (element) => element === document.scrollingElement ? window : element;
|
|
10482
10516
|
function scrollInfo(onScroll, { container = document.scrollingElement, ...options } = {}) {
|
|
10483
10517
|
if (!container)
|
|
10484
|
-
return noop
|
|
10518
|
+
return noop;
|
|
10485
10519
|
let containerHandlers = onScrollHandlers.get(container);
|
|
10486
10520
|
/**
|
|
10487
10521
|
* Get the onScroll handlers for this container.
|
|
@@ -10609,7 +10643,7 @@
|
|
|
10609
10643
|
|
|
10610
10644
|
function scroll(onScroll, { axis = "y", container = document.scrollingElement, ...options } = {}) {
|
|
10611
10645
|
if (!container)
|
|
10612
|
-
return noop
|
|
10646
|
+
return noop;
|
|
10613
10647
|
const optionsWithDefaults = { axis, container, ...options };
|
|
10614
10648
|
return typeof onScroll === "function"
|
|
10615
10649
|
? attachToFunction(onScroll, optionsWithDefaults)
|
|
@@ -10770,7 +10804,7 @@
|
|
|
10770
10804
|
exports.createBox = createBox;
|
|
10771
10805
|
exports.createDelta = createDelta;
|
|
10772
10806
|
exports.createGeneratorEasing = createGeneratorEasing;
|
|
10773
|
-
exports.createProjectionNode = createProjectionNode;
|
|
10807
|
+
exports.createProjectionNode = createProjectionNode$1;
|
|
10774
10808
|
exports.createRenderBatcher = createRenderBatcher;
|
|
10775
10809
|
exports.createScopedAnimate = createScopedAnimate;
|
|
10776
10810
|
exports.cubicBezier = cubicBezier;
|
|
@@ -10884,7 +10918,7 @@
|
|
|
10884
10918
|
exports.motionValue = motionValue;
|
|
10885
10919
|
exports.moveItem = moveItem;
|
|
10886
10920
|
exports.nodeGroup = nodeGroup;
|
|
10887
|
-
exports.noop = noop
|
|
10921
|
+
exports.noop = noop;
|
|
10888
10922
|
exports.number = number;
|
|
10889
10923
|
exports.numberValueTypes = numberValueTypes;
|
|
10890
10924
|
exports.observeTimeline = observeTimeline;
|