animejs 4.3.3 → 4.3.5
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/bundles/anime.esm.js +73 -58
- package/dist/bundles/anime.esm.min.js +2 -2
- package/dist/bundles/anime.umd.js +73 -58
- package/dist/bundles/anime.umd.min.js +2 -2
- package/dist/modules/animatable/animatable.cjs +1 -1
- package/dist/modules/animatable/animatable.js +1 -1
- package/dist/modules/animatable/index.cjs +1 -1
- package/dist/modules/animatable/index.js +1 -1
- package/dist/modules/animation/additive.cjs +1 -1
- package/dist/modules/animation/additive.js +1 -1
- package/dist/modules/animation/animation.cjs +1 -1
- package/dist/modules/animation/animation.js +1 -1
- package/dist/modules/animation/composition.cjs +1 -1
- package/dist/modules/animation/composition.js +1 -1
- package/dist/modules/animation/index.cjs +1 -1
- package/dist/modules/animation/index.js +1 -1
- package/dist/modules/core/clock.cjs +1 -1
- package/dist/modules/core/clock.js +1 -1
- package/dist/modules/core/colors.cjs +1 -1
- package/dist/modules/core/colors.js +1 -1
- package/dist/modules/core/consts.cjs +3 -1
- package/dist/modules/core/consts.d.ts +1 -0
- package/dist/modules/core/consts.js +3 -2
- package/dist/modules/core/globals.cjs +2 -2
- package/dist/modules/core/globals.js +2 -2
- package/dist/modules/core/helpers.cjs +5 -5
- package/dist/modules/core/helpers.js +6 -6
- package/dist/modules/core/render.cjs +1 -1
- package/dist/modules/core/render.js +1 -1
- package/dist/modules/core/styles.cjs +1 -1
- package/dist/modules/core/styles.js +1 -1
- package/dist/modules/core/targets.cjs +1 -1
- package/dist/modules/core/targets.js +1 -1
- package/dist/modules/core/transforms.cjs +1 -1
- package/dist/modules/core/transforms.js +1 -1
- package/dist/modules/core/units.cjs +1 -1
- package/dist/modules/core/units.js +1 -1
- package/dist/modules/core/values.cjs +1 -1
- package/dist/modules/core/values.js +1 -1
- package/dist/modules/draggable/draggable.cjs +1 -1
- package/dist/modules/draggable/draggable.js +1 -1
- package/dist/modules/draggable/index.cjs +1 -1
- package/dist/modules/draggable/index.js +1 -1
- package/dist/modules/easings/cubic-bezier/index.cjs +1 -1
- package/dist/modules/easings/cubic-bezier/index.js +1 -1
- package/dist/modules/easings/eases/index.cjs +1 -1
- package/dist/modules/easings/eases/index.js +1 -1
- package/dist/modules/easings/eases/parser.cjs +1 -1
- package/dist/modules/easings/eases/parser.js +1 -1
- package/dist/modules/easings/index.cjs +1 -1
- package/dist/modules/easings/index.js +1 -1
- package/dist/modules/easings/irregular/index.cjs +1 -1
- package/dist/modules/easings/irregular/index.js +1 -1
- package/dist/modules/easings/linear/index.cjs +1 -1
- package/dist/modules/easings/linear/index.js +1 -1
- package/dist/modules/easings/none.cjs +1 -1
- package/dist/modules/easings/none.js +1 -1
- package/dist/modules/easings/spring/index.cjs +1 -1
- package/dist/modules/easings/spring/index.js +1 -1
- package/dist/modules/easings/steps/index.cjs +1 -1
- package/dist/modules/easings/steps/index.js +1 -1
- package/dist/modules/engine/engine.cjs +1 -1
- package/dist/modules/engine/engine.js +1 -1
- package/dist/modules/engine/index.cjs +1 -1
- package/dist/modules/engine/index.js +1 -1
- package/dist/modules/events/index.cjs +1 -1
- package/dist/modules/events/index.js +1 -1
- package/dist/modules/events/scroll.cjs +5 -4
- package/dist/modules/events/scroll.js +5 -4
- package/dist/modules/index.cjs +1 -1
- package/dist/modules/index.js +1 -1
- package/dist/modules/layout/index.cjs +1 -1
- package/dist/modules/layout/index.js +1 -1
- package/dist/modules/layout/layout.cjs +55 -46
- package/dist/modules/layout/layout.js +55 -46
- package/dist/modules/scope/index.cjs +1 -1
- package/dist/modules/scope/index.js +1 -1
- package/dist/modules/scope/scope.cjs +1 -1
- package/dist/modules/scope/scope.js +1 -1
- package/dist/modules/svg/drawable.cjs +1 -1
- package/dist/modules/svg/drawable.js +1 -1
- package/dist/modules/svg/helpers.cjs +1 -1
- package/dist/modules/svg/helpers.js +1 -1
- package/dist/modules/svg/index.cjs +1 -1
- package/dist/modules/svg/index.js +1 -1
- package/dist/modules/svg/morphto.cjs +1 -1
- package/dist/modules/svg/morphto.js +1 -1
- package/dist/modules/svg/motionpath.cjs +1 -1
- package/dist/modules/svg/motionpath.js +1 -1
- package/dist/modules/text/index.cjs +1 -1
- package/dist/modules/text/index.js +1 -1
- package/dist/modules/text/split.cjs +1 -1
- package/dist/modules/text/split.js +1 -1
- package/dist/modules/timeline/index.cjs +1 -1
- package/dist/modules/timeline/index.js +1 -1
- package/dist/modules/timeline/position.cjs +1 -1
- package/dist/modules/timeline/position.js +1 -1
- package/dist/modules/timeline/timeline.cjs +8 -4
- package/dist/modules/timeline/timeline.js +8 -4
- package/dist/modules/timer/index.cjs +1 -1
- package/dist/modules/timer/index.js +1 -1
- package/dist/modules/timer/timer.cjs +1 -1
- package/dist/modules/timer/timer.js +1 -1
- package/dist/modules/utils/chainable.cjs +1 -1
- package/dist/modules/utils/chainable.js +1 -1
- package/dist/modules/utils/index.cjs +1 -1
- package/dist/modules/utils/index.js +1 -1
- package/dist/modules/utils/number.cjs +1 -1
- package/dist/modules/utils/number.js +1 -1
- package/dist/modules/utils/random.cjs +1 -1
- package/dist/modules/utils/random.js +1 -1
- package/dist/modules/utils/stagger.cjs +1 -1
- package/dist/modules/utils/stagger.js +1 -1
- package/dist/modules/utils/target.cjs +1 -1
- package/dist/modules/utils/target.js +1 -1
- package/dist/modules/utils/time.cjs +1 -1
- package/dist/modules/utils/time.js +1 -1
- package/dist/modules/waapi/composition.cjs +2 -2
- package/dist/modules/waapi/composition.js +2 -2
- package/dist/modules/waapi/index.cjs +1 -1
- package/dist/modules/waapi/index.js +1 -1
- package/dist/modules/waapi/waapi.cjs +1 -1
- package/dist/modules/waapi/waapi.js +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - events - CJS
|
|
3
|
-
* @version v4.3.
|
|
3
|
+
* @version v4.3.5
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -500,7 +500,9 @@ class ScrollObserver {
|
|
|
500
500
|
linked.pause();
|
|
501
501
|
this.linked = linked;
|
|
502
502
|
// Forces WAAPI Animation to persist; otherwise, they will stop syncing on finish.
|
|
503
|
-
if (!helpers.isUnd(
|
|
503
|
+
if (!helpers.isUnd(linked) && !helpers.isUnd(/** @type {WAAPIAnimation} */(linked).persist)) {
|
|
504
|
+
/** @type {WAAPIAnimation} */(linked).persist = true;
|
|
505
|
+
}
|
|
504
506
|
// Try to use a target of the linked object if no target parameters specified
|
|
505
507
|
if (!this._params.target) {
|
|
506
508
|
/** @type {HTMLElement} */
|
|
@@ -702,12 +704,11 @@ class ScrollObserver {
|
|
|
702
704
|
// let offsetX = 0;
|
|
703
705
|
// let offsetY = 0;
|
|
704
706
|
// let $offsetParent = $el;
|
|
705
|
-
/** @type {Element} */
|
|
706
707
|
if (linked) {
|
|
707
708
|
linkedTime = linked.currentTime;
|
|
708
709
|
linked.seek(0, true);
|
|
709
710
|
}
|
|
710
|
-
|
|
711
|
+
// Old implementation to get offset and targetSize before fixing https://github.com/juliangarnier/anime/issues/1021
|
|
711
712
|
// const isContainerStatic = get(container.element, 'position') === 'static' ? set(container.element, { position: 'relative '}) : false;
|
|
712
713
|
// while ($el && $el !== container.element && $el !== doc.body) {
|
|
713
714
|
// const isSticky = get($el, 'position') === 'sticky' ?
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - events - ESM
|
|
3
|
-
* @version v4.3.
|
|
3
|
+
* @version v4.3.5
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -498,7 +498,9 @@ class ScrollObserver {
|
|
|
498
498
|
linked.pause();
|
|
499
499
|
this.linked = linked;
|
|
500
500
|
// Forces WAAPI Animation to persist; otherwise, they will stop syncing on finish.
|
|
501
|
-
if (!isUnd(
|
|
501
|
+
if (!isUnd(linked) && !isUnd(/** @type {WAAPIAnimation} */(linked).persist)) {
|
|
502
|
+
/** @type {WAAPIAnimation} */(linked).persist = true;
|
|
503
|
+
}
|
|
502
504
|
// Try to use a target of the linked object if no target parameters specified
|
|
503
505
|
if (!this._params.target) {
|
|
504
506
|
/** @type {HTMLElement} */
|
|
@@ -700,12 +702,11 @@ class ScrollObserver {
|
|
|
700
702
|
// let offsetX = 0;
|
|
701
703
|
// let offsetY = 0;
|
|
702
704
|
// let $offsetParent = $el;
|
|
703
|
-
/** @type {Element} */
|
|
704
705
|
if (linked) {
|
|
705
706
|
linkedTime = linked.currentTime;
|
|
706
707
|
linked.seek(0, true);
|
|
707
708
|
}
|
|
708
|
-
|
|
709
|
+
// Old implementation to get offset and targetSize before fixing https://github.com/juliangarnier/anime/issues/1021
|
|
709
710
|
// const isContainerStatic = get(container.element, 'position') === 'static' ? set(container.element, { position: 'relative '}) : false;
|
|
710
711
|
// while ($el && $el !== container.element && $el !== doc.body) {
|
|
711
712
|
// const isSticky = get($el, 'position') === 'sticky' ?
|
package/dist/modules/index.cjs
CHANGED
package/dist/modules/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - layout - CJS
|
|
3
|
-
* @version v4.3.
|
|
3
|
+
* @version v4.3.5
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -1309,7 +1309,7 @@ class AutoLayout {
|
|
|
1309
1309
|
// const hiddenStateChanged = (topLevelAdded || newlyRemoved) && wasRemovedBefore !== isRemovedNow;
|
|
1310
1310
|
|
|
1311
1311
|
if (node.isTarget && (!node.measuredIsRemoved && oldStateNode.measuredIsVisible || node.measuredIsRemoved && node.measuredIsVisible)) {
|
|
1312
|
-
if (
|
|
1312
|
+
if (nodeProperties.transform !== 'none' || oldStateNodeProperties.transform !== 'none') {
|
|
1313
1313
|
node.hasTransform = true;
|
|
1314
1314
|
transformed.push($el);
|
|
1315
1315
|
}
|
|
@@ -1325,7 +1325,7 @@ class AutoLayout {
|
|
|
1325
1325
|
if (!node.isTarget) {
|
|
1326
1326
|
swapping.push($el);
|
|
1327
1327
|
if (node.sizeChanged && parent && parent.isTarget && parent.sizeChanged) {
|
|
1328
|
-
if (
|
|
1328
|
+
if (swapAtProps.transform) {
|
|
1329
1329
|
node.hasTransform = true;
|
|
1330
1330
|
transformed.push($el);
|
|
1331
1331
|
}
|
|
@@ -1365,7 +1365,7 @@ class AutoLayout {
|
|
|
1365
1365
|
|
|
1366
1366
|
// muteNodeTransition(newNode);
|
|
1367
1367
|
|
|
1368
|
-
// Don't animate
|
|
1368
|
+
// Don't animate positions of inlined elements (to avoid text reflow)
|
|
1369
1369
|
if (!newNode.isInlined) {
|
|
1370
1370
|
// Display grid can mess with the absolute positioning, so set it to block during transition
|
|
1371
1371
|
if (oldNode.measuredDisplay === 'grid' || newNode.measuredDisplay === 'grid') $el.style.setProperty('display', 'block', 'important');
|
|
@@ -1384,14 +1384,15 @@ class AutoLayout {
|
|
|
1384
1384
|
$el.style.left = '0px';
|
|
1385
1385
|
$el.style.top = '0px';
|
|
1386
1386
|
}
|
|
1387
|
-
$el.style.width = `${oldNodeState.width}px`;
|
|
1388
|
-
$el.style.height = `${oldNodeState.height}px`;
|
|
1389
|
-
// Overrides user defined min and max to prevents width and height clamping
|
|
1390
|
-
$el.style.minWidth = `auto`;
|
|
1391
|
-
$el.style.minHeight = `auto`;
|
|
1392
|
-
$el.style.maxWidth = `none`;
|
|
1393
|
-
$el.style.maxHeight = `none`;
|
|
1394
1387
|
}
|
|
1388
|
+
// Animate dimensions for all elements (including inlined)
|
|
1389
|
+
$el.style.width = `${oldNodeState.width}px`;
|
|
1390
|
+
$el.style.height = `${oldNodeState.height}px`;
|
|
1391
|
+
// Overrides user defined min and max to prevents width and height clamping
|
|
1392
|
+
$el.style.minWidth = `auto`;
|
|
1393
|
+
$el.style.minHeight = `auto`;
|
|
1394
|
+
$el.style.maxWidth = `none`;
|
|
1395
|
+
$el.style.maxHeight = `none`;
|
|
1395
1396
|
}
|
|
1396
1397
|
|
|
1397
1398
|
// Restore the scroll position if the oldState differs from the current state
|
|
@@ -1412,21 +1413,19 @@ class AutoLayout {
|
|
|
1412
1413
|
const animatedProps = {
|
|
1413
1414
|
composition: 'none',
|
|
1414
1415
|
};
|
|
1415
|
-
if (
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
nodeHasChanged = true;
|
|
1429
|
-
}
|
|
1416
|
+
if (oldNodeState.width !== newNodeState.width) {
|
|
1417
|
+
animatedProps.width = [oldNodeState.width, newNodeState.width];
|
|
1418
|
+
nodeHasChanged = true;
|
|
1419
|
+
}
|
|
1420
|
+
if (oldNodeState.height !== newNodeState.height) {
|
|
1421
|
+
animatedProps.height = [oldNodeState.height, newNodeState.height];
|
|
1422
|
+
nodeHasChanged = true;
|
|
1423
|
+
}
|
|
1424
|
+
// If the node has transforms we handle the translate animation in waapi otherwise translate and other transforms can be out of sync
|
|
1425
|
+
// And we don't animate the position of inlined elements
|
|
1426
|
+
if (!newNode.hasTransform && !newNode.isInlined) {
|
|
1427
|
+
animatedProps.translate = [`${oldNodeState.x}px ${oldNodeState.y}px`, `${newNodeState.x}px ${newNodeState.y}px`];
|
|
1428
|
+
nodeHasChanged = true;
|
|
1430
1429
|
}
|
|
1431
1430
|
this.properties.forEach(prop => {
|
|
1432
1431
|
const oldVal = oldNodeState[prop];
|
|
@@ -1448,15 +1447,16 @@ class AutoLayout {
|
|
|
1448
1447
|
for (let i = 0, l = swapping.length; i < l; i++) {
|
|
1449
1448
|
const $el = swapping[i];
|
|
1450
1449
|
const oldNode = oldState.getNode($el);
|
|
1450
|
+
const oldNodeProps = oldNode.properties;
|
|
1451
|
+
$el.style.width = `${oldNodeProps.width}px`;
|
|
1452
|
+
$el.style.height = `${oldNodeProps.height}px`;
|
|
1453
|
+
// Overrides user defined min and max to prevents width and height clamping
|
|
1454
|
+
$el.style.minWidth = `auto`;
|
|
1455
|
+
$el.style.minHeight = `auto`;
|
|
1456
|
+
$el.style.maxWidth = `none`;
|
|
1457
|
+
$el.style.maxHeight = `none`;
|
|
1458
|
+
// We don't animate the position of inlined elements
|
|
1451
1459
|
if (!oldNode.isInlined) {
|
|
1452
|
-
const oldNodeProps = oldNode.properties;
|
|
1453
|
-
$el.style.width = `${oldNodeProps.width}px`;
|
|
1454
|
-
$el.style.height = `${oldNodeProps.height}px`;
|
|
1455
|
-
// Overrides user defined min and max to prevents width and height clamping
|
|
1456
|
-
$el.style.minWidth = `auto`;
|
|
1457
|
-
$el.style.minHeight = `auto`;
|
|
1458
|
-
$el.style.maxWidth = `none`;
|
|
1459
|
-
$el.style.maxHeight = `none`;
|
|
1460
1460
|
$el.style.translate = `${oldNodeProps.x}px ${oldNodeProps.y}px`;
|
|
1461
1461
|
}
|
|
1462
1462
|
this.properties.forEach(prop => {
|
|
@@ -1471,14 +1471,15 @@ class AutoLayout {
|
|
|
1471
1471
|
const newNode = newState.getNode($el);
|
|
1472
1472
|
const newNodeProps = newNode.properties;
|
|
1473
1473
|
this.timeline.call(() => {
|
|
1474
|
+
$el.style.width = `${newNodeProps.width}px`;
|
|
1475
|
+
$el.style.height = `${newNodeProps.height}px`;
|
|
1476
|
+
// Overrides user defined min and max to prevents width and height clamping
|
|
1477
|
+
$el.style.minWidth = `auto`;
|
|
1478
|
+
$el.style.minHeight = `auto`;
|
|
1479
|
+
$el.style.maxWidth = `none`;
|
|
1480
|
+
$el.style.maxHeight = `none`;
|
|
1481
|
+
// Don't set translate for inlined elements (to avoid text reflow)
|
|
1474
1482
|
if (!newNode.isInlined) {
|
|
1475
|
-
$el.style.width = `${newNodeProps.width}px`;
|
|
1476
|
-
$el.style.height = `${newNodeProps.height}px`;
|
|
1477
|
-
// Overrides user defined min and max to prevents width and height clamping
|
|
1478
|
-
$el.style.minWidth = `auto`;
|
|
1479
|
-
$el.style.minHeight = `auto`;
|
|
1480
|
-
$el.style.maxWidth = `none`;
|
|
1481
|
-
$el.style.maxHeight = `none`;
|
|
1482
1483
|
$el.style.translate = `${newNodeProps.x}px ${newNodeProps.y}px`;
|
|
1483
1484
|
}
|
|
1484
1485
|
this.properties.forEach(prop => {
|
|
@@ -1511,19 +1512,27 @@ class AutoLayout {
|
|
|
1511
1512
|
const transformedLength = transformed.length;
|
|
1512
1513
|
|
|
1513
1514
|
if (transformedLength) {
|
|
1514
|
-
// We only need to set the transform property here since translate is
|
|
1515
|
+
// We only need to set the transform property here since translate is already defined in the targets loop
|
|
1515
1516
|
for (let i = 0; i < transformedLength; i++) {
|
|
1516
1517
|
const $el = transformed[i];
|
|
1517
|
-
|
|
1518
|
+
const node = newState.getNode($el);
|
|
1519
|
+
// Don't set translate for inlined elements (to avoid text reflow)
|
|
1520
|
+
if (!node.isInlined) {
|
|
1521
|
+
$el.style.translate = `${oldState.getComputedValue($el, 'x')}px ${oldState.getComputedValue($el, 'y')}px`;
|
|
1522
|
+
}
|
|
1518
1523
|
$el.style.transform = oldState.getComputedValue($el, 'transform');
|
|
1519
1524
|
if (animatedSwap.includes($el)) {
|
|
1520
|
-
const node = newState.getNode($el);
|
|
1521
1525
|
node.ease = values.getFunctionValue(swapAtParams.ease, $el, node.index, node.total);
|
|
1522
1526
|
node.duration = values.getFunctionValue(swapAtParams.duration, $el, node.index, node.total);
|
|
1523
1527
|
}
|
|
1524
1528
|
}
|
|
1525
1529
|
this.transformAnimation = waapi.waapi.animate(transformed, {
|
|
1526
|
-
translate: (/** @type {HTMLElement} */$el) =>
|
|
1530
|
+
translate: (/** @type {HTMLElement} */$el) => {
|
|
1531
|
+
const node = newState.getNode($el);
|
|
1532
|
+
// Don't animate translate for inlined elements (to avoid text reflow)
|
|
1533
|
+
if (node.isInlined) return '0px 0px';
|
|
1534
|
+
return `${newState.getComputedValue($el, 'x')}px ${newState.getComputedValue($el, 'y')}px`;
|
|
1535
|
+
},
|
|
1527
1536
|
transform: (/** @type {HTMLElement} */$el) => {
|
|
1528
1537
|
const newValue = newState.getComputedValue($el, 'transform');
|
|
1529
1538
|
if (!animatedSwap.includes($el)) return newValue;
|
|
@@ -1532,7 +1541,7 @@ class AutoLayout {
|
|
|
1532
1541
|
return [oldValue, values.getFunctionValue(swapAtProps.transform, $el, node.index, node.total), newValue]
|
|
1533
1542
|
},
|
|
1534
1543
|
autoplay: false,
|
|
1535
|
-
persist: true,
|
|
1544
|
+
// persist: true,
|
|
1536
1545
|
...timingParams,
|
|
1537
1546
|
});
|
|
1538
1547
|
this.timeline.sync(this.transformAnimation, 0);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - layout - ESM
|
|
3
|
-
* @version v4.3.
|
|
3
|
+
* @version v4.3.5
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -1307,7 +1307,7 @@ class AutoLayout {
|
|
|
1307
1307
|
// const hiddenStateChanged = (topLevelAdded || newlyRemoved) && wasRemovedBefore !== isRemovedNow;
|
|
1308
1308
|
|
|
1309
1309
|
if (node.isTarget && (!node.measuredIsRemoved && oldStateNode.measuredIsVisible || node.measuredIsRemoved && node.measuredIsVisible)) {
|
|
1310
|
-
if (
|
|
1310
|
+
if (nodeProperties.transform !== 'none' || oldStateNodeProperties.transform !== 'none') {
|
|
1311
1311
|
node.hasTransform = true;
|
|
1312
1312
|
transformed.push($el);
|
|
1313
1313
|
}
|
|
@@ -1323,7 +1323,7 @@ class AutoLayout {
|
|
|
1323
1323
|
if (!node.isTarget) {
|
|
1324
1324
|
swapping.push($el);
|
|
1325
1325
|
if (node.sizeChanged && parent && parent.isTarget && parent.sizeChanged) {
|
|
1326
|
-
if (
|
|
1326
|
+
if (swapAtProps.transform) {
|
|
1327
1327
|
node.hasTransform = true;
|
|
1328
1328
|
transformed.push($el);
|
|
1329
1329
|
}
|
|
@@ -1363,7 +1363,7 @@ class AutoLayout {
|
|
|
1363
1363
|
|
|
1364
1364
|
// muteNodeTransition(newNode);
|
|
1365
1365
|
|
|
1366
|
-
// Don't animate
|
|
1366
|
+
// Don't animate positions of inlined elements (to avoid text reflow)
|
|
1367
1367
|
if (!newNode.isInlined) {
|
|
1368
1368
|
// Display grid can mess with the absolute positioning, so set it to block during transition
|
|
1369
1369
|
if (oldNode.measuredDisplay === 'grid' || newNode.measuredDisplay === 'grid') $el.style.setProperty('display', 'block', 'important');
|
|
@@ -1382,14 +1382,15 @@ class AutoLayout {
|
|
|
1382
1382
|
$el.style.left = '0px';
|
|
1383
1383
|
$el.style.top = '0px';
|
|
1384
1384
|
}
|
|
1385
|
-
$el.style.width = `${oldNodeState.width}px`;
|
|
1386
|
-
$el.style.height = `${oldNodeState.height}px`;
|
|
1387
|
-
// Overrides user defined min and max to prevents width and height clamping
|
|
1388
|
-
$el.style.minWidth = `auto`;
|
|
1389
|
-
$el.style.minHeight = `auto`;
|
|
1390
|
-
$el.style.maxWidth = `none`;
|
|
1391
|
-
$el.style.maxHeight = `none`;
|
|
1392
1385
|
}
|
|
1386
|
+
// Animate dimensions for all elements (including inlined)
|
|
1387
|
+
$el.style.width = `${oldNodeState.width}px`;
|
|
1388
|
+
$el.style.height = `${oldNodeState.height}px`;
|
|
1389
|
+
// Overrides user defined min and max to prevents width and height clamping
|
|
1390
|
+
$el.style.minWidth = `auto`;
|
|
1391
|
+
$el.style.minHeight = `auto`;
|
|
1392
|
+
$el.style.maxWidth = `none`;
|
|
1393
|
+
$el.style.maxHeight = `none`;
|
|
1393
1394
|
}
|
|
1394
1395
|
|
|
1395
1396
|
// Restore the scroll position if the oldState differs from the current state
|
|
@@ -1410,21 +1411,19 @@ class AutoLayout {
|
|
|
1410
1411
|
const animatedProps = {
|
|
1411
1412
|
composition: 'none',
|
|
1412
1413
|
};
|
|
1413
|
-
if (
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
nodeHasChanged = true;
|
|
1427
|
-
}
|
|
1414
|
+
if (oldNodeState.width !== newNodeState.width) {
|
|
1415
|
+
animatedProps.width = [oldNodeState.width, newNodeState.width];
|
|
1416
|
+
nodeHasChanged = true;
|
|
1417
|
+
}
|
|
1418
|
+
if (oldNodeState.height !== newNodeState.height) {
|
|
1419
|
+
animatedProps.height = [oldNodeState.height, newNodeState.height];
|
|
1420
|
+
nodeHasChanged = true;
|
|
1421
|
+
}
|
|
1422
|
+
// If the node has transforms we handle the translate animation in waapi otherwise translate and other transforms can be out of sync
|
|
1423
|
+
// And we don't animate the position of inlined elements
|
|
1424
|
+
if (!newNode.hasTransform && !newNode.isInlined) {
|
|
1425
|
+
animatedProps.translate = [`${oldNodeState.x}px ${oldNodeState.y}px`, `${newNodeState.x}px ${newNodeState.y}px`];
|
|
1426
|
+
nodeHasChanged = true;
|
|
1428
1427
|
}
|
|
1429
1428
|
this.properties.forEach(prop => {
|
|
1430
1429
|
const oldVal = oldNodeState[prop];
|
|
@@ -1446,15 +1445,16 @@ class AutoLayout {
|
|
|
1446
1445
|
for (let i = 0, l = swapping.length; i < l; i++) {
|
|
1447
1446
|
const $el = swapping[i];
|
|
1448
1447
|
const oldNode = oldState.getNode($el);
|
|
1448
|
+
const oldNodeProps = oldNode.properties;
|
|
1449
|
+
$el.style.width = `${oldNodeProps.width}px`;
|
|
1450
|
+
$el.style.height = `${oldNodeProps.height}px`;
|
|
1451
|
+
// Overrides user defined min and max to prevents width and height clamping
|
|
1452
|
+
$el.style.minWidth = `auto`;
|
|
1453
|
+
$el.style.minHeight = `auto`;
|
|
1454
|
+
$el.style.maxWidth = `none`;
|
|
1455
|
+
$el.style.maxHeight = `none`;
|
|
1456
|
+
// We don't animate the position of inlined elements
|
|
1449
1457
|
if (!oldNode.isInlined) {
|
|
1450
|
-
const oldNodeProps = oldNode.properties;
|
|
1451
|
-
$el.style.width = `${oldNodeProps.width}px`;
|
|
1452
|
-
$el.style.height = `${oldNodeProps.height}px`;
|
|
1453
|
-
// Overrides user defined min and max to prevents width and height clamping
|
|
1454
|
-
$el.style.minWidth = `auto`;
|
|
1455
|
-
$el.style.minHeight = `auto`;
|
|
1456
|
-
$el.style.maxWidth = `none`;
|
|
1457
|
-
$el.style.maxHeight = `none`;
|
|
1458
1458
|
$el.style.translate = `${oldNodeProps.x}px ${oldNodeProps.y}px`;
|
|
1459
1459
|
}
|
|
1460
1460
|
this.properties.forEach(prop => {
|
|
@@ -1469,14 +1469,15 @@ class AutoLayout {
|
|
|
1469
1469
|
const newNode = newState.getNode($el);
|
|
1470
1470
|
const newNodeProps = newNode.properties;
|
|
1471
1471
|
this.timeline.call(() => {
|
|
1472
|
+
$el.style.width = `${newNodeProps.width}px`;
|
|
1473
|
+
$el.style.height = `${newNodeProps.height}px`;
|
|
1474
|
+
// Overrides user defined min and max to prevents width and height clamping
|
|
1475
|
+
$el.style.minWidth = `auto`;
|
|
1476
|
+
$el.style.minHeight = `auto`;
|
|
1477
|
+
$el.style.maxWidth = `none`;
|
|
1478
|
+
$el.style.maxHeight = `none`;
|
|
1479
|
+
// Don't set translate for inlined elements (to avoid text reflow)
|
|
1472
1480
|
if (!newNode.isInlined) {
|
|
1473
|
-
$el.style.width = `${newNodeProps.width}px`;
|
|
1474
|
-
$el.style.height = `${newNodeProps.height}px`;
|
|
1475
|
-
// Overrides user defined min and max to prevents width and height clamping
|
|
1476
|
-
$el.style.minWidth = `auto`;
|
|
1477
|
-
$el.style.minHeight = `auto`;
|
|
1478
|
-
$el.style.maxWidth = `none`;
|
|
1479
|
-
$el.style.maxHeight = `none`;
|
|
1480
1481
|
$el.style.translate = `${newNodeProps.x}px ${newNodeProps.y}px`;
|
|
1481
1482
|
}
|
|
1482
1483
|
this.properties.forEach(prop => {
|
|
@@ -1509,19 +1510,27 @@ class AutoLayout {
|
|
|
1509
1510
|
const transformedLength = transformed.length;
|
|
1510
1511
|
|
|
1511
1512
|
if (transformedLength) {
|
|
1512
|
-
// We only need to set the transform property here since translate is
|
|
1513
|
+
// We only need to set the transform property here since translate is already defined in the targets loop
|
|
1513
1514
|
for (let i = 0; i < transformedLength; i++) {
|
|
1514
1515
|
const $el = transformed[i];
|
|
1515
|
-
|
|
1516
|
+
const node = newState.getNode($el);
|
|
1517
|
+
// Don't set translate for inlined elements (to avoid text reflow)
|
|
1518
|
+
if (!node.isInlined) {
|
|
1519
|
+
$el.style.translate = `${oldState.getComputedValue($el, 'x')}px ${oldState.getComputedValue($el, 'y')}px`;
|
|
1520
|
+
}
|
|
1516
1521
|
$el.style.transform = oldState.getComputedValue($el, 'transform');
|
|
1517
1522
|
if (animatedSwap.includes($el)) {
|
|
1518
|
-
const node = newState.getNode($el);
|
|
1519
1523
|
node.ease = getFunctionValue(swapAtParams.ease, $el, node.index, node.total);
|
|
1520
1524
|
node.duration = getFunctionValue(swapAtParams.duration, $el, node.index, node.total);
|
|
1521
1525
|
}
|
|
1522
1526
|
}
|
|
1523
1527
|
this.transformAnimation = waapi.animate(transformed, {
|
|
1524
|
-
translate: (/** @type {HTMLElement} */$el) =>
|
|
1528
|
+
translate: (/** @type {HTMLElement} */$el) => {
|
|
1529
|
+
const node = newState.getNode($el);
|
|
1530
|
+
// Don't animate translate for inlined elements (to avoid text reflow)
|
|
1531
|
+
if (node.isInlined) return '0px 0px';
|
|
1532
|
+
return `${newState.getComputedValue($el, 'x')}px ${newState.getComputedValue($el, 'y')}px`;
|
|
1533
|
+
},
|
|
1525
1534
|
transform: (/** @type {HTMLElement} */$el) => {
|
|
1526
1535
|
const newValue = newState.getComputedValue($el, 'transform');
|
|
1527
1536
|
if (!animatedSwap.includes($el)) return newValue;
|
|
@@ -1530,7 +1539,7 @@ class AutoLayout {
|
|
|
1530
1539
|
return [oldValue, getFunctionValue(swapAtProps.transform, $el, node.index, node.total), newValue]
|
|
1531
1540
|
},
|
|
1532
1541
|
autoplay: false,
|
|
1533
|
-
persist: true,
|
|
1542
|
+
// persist: true,
|
|
1534
1543
|
...timingParams,
|
|
1535
1544
|
});
|
|
1536
1545
|
this.timeline.sync(this.transformAnimation, 0);
|