animejs 4.3.4 → 4.3.6
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/README.md +1 -1
- package/dist/bundles/anime.esm.js +77 -52
- package/dist/bundles/anime.esm.min.js +2 -2
- package/dist/bundles/anime.umd.js +77 -52
- 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 +1 -1
- package/dist/modules/events/scroll.js +1 -1
- 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 +74 -46
- package/dist/modules/layout/layout.js +74 -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 +1 -1
- package/dist/modules/timeline/timeline.js +1 -1
- 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
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.6
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -25,6 +25,12 @@ var globals = require('../core/globals.cjs');
|
|
|
25
25
|
* } from '../types/index.js'
|
|
26
26
|
*/
|
|
27
27
|
|
|
28
|
+
/**
|
|
29
|
+
* @import {
|
|
30
|
+
* ScrollObserver,
|
|
31
|
+
* } from '../events/scroll.js'
|
|
32
|
+
*/
|
|
33
|
+
|
|
28
34
|
/**
|
|
29
35
|
* @import {
|
|
30
36
|
* Timeline,
|
|
@@ -1075,6 +1081,12 @@ class AutoLayout {
|
|
|
1075
1081
|
}
|
|
1076
1082
|
}
|
|
1077
1083
|
tlParams.onComplete = () => {
|
|
1084
|
+
const ap = /** @type {ScrollObserver} */(params.autoplay);
|
|
1085
|
+
const isScrollControled = ap && ap.linked;
|
|
1086
|
+
if (isScrollControled) {
|
|
1087
|
+
if (onComplete) onComplete(this.timeline);
|
|
1088
|
+
return;
|
|
1089
|
+
}
|
|
1078
1090
|
// Make sure to call .cancel() after restoreNodeInlineStyles(node); otehrwise the commited styles get reverted
|
|
1079
1091
|
if (this.transformAnimation) this.transformAnimation.cancel();
|
|
1080
1092
|
newState.forEachRootNode(node => {
|
|
@@ -1096,6 +1108,13 @@ class AutoLayout {
|
|
|
1096
1108
|
});
|
|
1097
1109
|
};
|
|
1098
1110
|
tlParams.onPause = () => {
|
|
1111
|
+
const ap = /** @type {ScrollObserver} */(params.autoplay);
|
|
1112
|
+
const isScrollControled = ap && ap.linked;
|
|
1113
|
+
if (isScrollControled) {
|
|
1114
|
+
if (onComplete) onComplete(this.timeline);
|
|
1115
|
+
if (onPause) onPause(this.timeline);
|
|
1116
|
+
return;
|
|
1117
|
+
}
|
|
1099
1118
|
if (!this.root.classList.contains('is-animated')) return;
|
|
1100
1119
|
if (this.transformAnimation) this.transformAnimation.cancel();
|
|
1101
1120
|
newState.forEachRootNode(restoreNodeVisualState);
|
|
@@ -1309,7 +1328,7 @@ class AutoLayout {
|
|
|
1309
1328
|
// const hiddenStateChanged = (topLevelAdded || newlyRemoved) && wasRemovedBefore !== isRemovedNow;
|
|
1310
1329
|
|
|
1311
1330
|
if (node.isTarget && (!node.measuredIsRemoved && oldStateNode.measuredIsVisible || node.measuredIsRemoved && node.measuredIsVisible)) {
|
|
1312
|
-
if (
|
|
1331
|
+
if (nodeProperties.transform !== 'none' || oldStateNodeProperties.transform !== 'none') {
|
|
1313
1332
|
node.hasTransform = true;
|
|
1314
1333
|
transformed.push($el);
|
|
1315
1334
|
}
|
|
@@ -1325,7 +1344,7 @@ class AutoLayout {
|
|
|
1325
1344
|
if (!node.isTarget) {
|
|
1326
1345
|
swapping.push($el);
|
|
1327
1346
|
if (node.sizeChanged && parent && parent.isTarget && parent.sizeChanged) {
|
|
1328
|
-
if (
|
|
1347
|
+
if (swapAtProps.transform) {
|
|
1329
1348
|
node.hasTransform = true;
|
|
1330
1349
|
transformed.push($el);
|
|
1331
1350
|
}
|
|
@@ -1365,7 +1384,7 @@ class AutoLayout {
|
|
|
1365
1384
|
|
|
1366
1385
|
// muteNodeTransition(newNode);
|
|
1367
1386
|
|
|
1368
|
-
// Don't animate
|
|
1387
|
+
// Don't animate positions of inlined elements (to avoid text reflow)
|
|
1369
1388
|
if (!newNode.isInlined) {
|
|
1370
1389
|
// Display grid can mess with the absolute positioning, so set it to block during transition
|
|
1371
1390
|
if (oldNode.measuredDisplay === 'grid' || newNode.measuredDisplay === 'grid') $el.style.setProperty('display', 'block', 'important');
|
|
@@ -1384,14 +1403,15 @@ class AutoLayout {
|
|
|
1384
1403
|
$el.style.left = '0px';
|
|
1385
1404
|
$el.style.top = '0px';
|
|
1386
1405
|
}
|
|
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
1406
|
}
|
|
1407
|
+
// Animate dimensions for all elements (including inlined)
|
|
1408
|
+
$el.style.width = `${oldNodeState.width}px`;
|
|
1409
|
+
$el.style.height = `${oldNodeState.height}px`;
|
|
1410
|
+
// Overrides user defined min and max to prevents width and height clamping
|
|
1411
|
+
$el.style.minWidth = `auto`;
|
|
1412
|
+
$el.style.minHeight = `auto`;
|
|
1413
|
+
$el.style.maxWidth = `none`;
|
|
1414
|
+
$el.style.maxHeight = `none`;
|
|
1395
1415
|
}
|
|
1396
1416
|
|
|
1397
1417
|
// Restore the scroll position if the oldState differs from the current state
|
|
@@ -1412,21 +1432,19 @@ class AutoLayout {
|
|
|
1412
1432
|
const animatedProps = {
|
|
1413
1433
|
composition: 'none',
|
|
1414
1434
|
};
|
|
1415
|
-
if (
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
nodeHasChanged = true;
|
|
1429
|
-
}
|
|
1435
|
+
if (oldNodeState.width !== newNodeState.width) {
|
|
1436
|
+
animatedProps.width = [oldNodeState.width, newNodeState.width];
|
|
1437
|
+
nodeHasChanged = true;
|
|
1438
|
+
}
|
|
1439
|
+
if (oldNodeState.height !== newNodeState.height) {
|
|
1440
|
+
animatedProps.height = [oldNodeState.height, newNodeState.height];
|
|
1441
|
+
nodeHasChanged = true;
|
|
1442
|
+
}
|
|
1443
|
+
// If the node has transforms we handle the translate animation in waapi otherwise translate and other transforms can be out of sync
|
|
1444
|
+
// And we don't animate the position of inlined elements
|
|
1445
|
+
if (!newNode.hasTransform && !newNode.isInlined) {
|
|
1446
|
+
animatedProps.translate = [`${oldNodeState.x}px ${oldNodeState.y}px`, `${newNodeState.x}px ${newNodeState.y}px`];
|
|
1447
|
+
nodeHasChanged = true;
|
|
1430
1448
|
}
|
|
1431
1449
|
this.properties.forEach(prop => {
|
|
1432
1450
|
const oldVal = oldNodeState[prop];
|
|
@@ -1448,15 +1466,16 @@ class AutoLayout {
|
|
|
1448
1466
|
for (let i = 0, l = swapping.length; i < l; i++) {
|
|
1449
1467
|
const $el = swapping[i];
|
|
1450
1468
|
const oldNode = oldState.getNode($el);
|
|
1469
|
+
const oldNodeProps = oldNode.properties;
|
|
1470
|
+
$el.style.width = `${oldNodeProps.width}px`;
|
|
1471
|
+
$el.style.height = `${oldNodeProps.height}px`;
|
|
1472
|
+
// Overrides user defined min and max to prevents width and height clamping
|
|
1473
|
+
$el.style.minWidth = `auto`;
|
|
1474
|
+
$el.style.minHeight = `auto`;
|
|
1475
|
+
$el.style.maxWidth = `none`;
|
|
1476
|
+
$el.style.maxHeight = `none`;
|
|
1477
|
+
// We don't animate the position of inlined elements
|
|
1451
1478
|
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
1479
|
$el.style.translate = `${oldNodeProps.x}px ${oldNodeProps.y}px`;
|
|
1461
1480
|
}
|
|
1462
1481
|
this.properties.forEach(prop => {
|
|
@@ -1471,14 +1490,15 @@ class AutoLayout {
|
|
|
1471
1490
|
const newNode = newState.getNode($el);
|
|
1472
1491
|
const newNodeProps = newNode.properties;
|
|
1473
1492
|
this.timeline.call(() => {
|
|
1493
|
+
$el.style.width = `${newNodeProps.width}px`;
|
|
1494
|
+
$el.style.height = `${newNodeProps.height}px`;
|
|
1495
|
+
// Overrides user defined min and max to prevents width and height clamping
|
|
1496
|
+
$el.style.minWidth = `auto`;
|
|
1497
|
+
$el.style.minHeight = `auto`;
|
|
1498
|
+
$el.style.maxWidth = `none`;
|
|
1499
|
+
$el.style.maxHeight = `none`;
|
|
1500
|
+
// Don't set translate for inlined elements (to avoid text reflow)
|
|
1474
1501
|
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
1502
|
$el.style.translate = `${newNodeProps.x}px ${newNodeProps.y}px`;
|
|
1483
1503
|
}
|
|
1484
1504
|
this.properties.forEach(prop => {
|
|
@@ -1511,19 +1531,27 @@ class AutoLayout {
|
|
|
1511
1531
|
const transformedLength = transformed.length;
|
|
1512
1532
|
|
|
1513
1533
|
if (transformedLength) {
|
|
1514
|
-
// We only need to set the transform property here since translate is
|
|
1534
|
+
// We only need to set the transform property here since translate is already defined in the targets loop
|
|
1515
1535
|
for (let i = 0; i < transformedLength; i++) {
|
|
1516
1536
|
const $el = transformed[i];
|
|
1517
|
-
|
|
1537
|
+
const node = newState.getNode($el);
|
|
1538
|
+
// Don't set translate for inlined elements (to avoid text reflow)
|
|
1539
|
+
if (!node.isInlined) {
|
|
1540
|
+
$el.style.translate = `${oldState.getComputedValue($el, 'x')}px ${oldState.getComputedValue($el, 'y')}px`;
|
|
1541
|
+
}
|
|
1518
1542
|
$el.style.transform = oldState.getComputedValue($el, 'transform');
|
|
1519
1543
|
if (animatedSwap.includes($el)) {
|
|
1520
|
-
const node = newState.getNode($el);
|
|
1521
1544
|
node.ease = values.getFunctionValue(swapAtParams.ease, $el, node.index, node.total);
|
|
1522
1545
|
node.duration = values.getFunctionValue(swapAtParams.duration, $el, node.index, node.total);
|
|
1523
1546
|
}
|
|
1524
1547
|
}
|
|
1525
1548
|
this.transformAnimation = waapi.waapi.animate(transformed, {
|
|
1526
|
-
translate: (/** @type {HTMLElement} */$el) =>
|
|
1549
|
+
translate: (/** @type {HTMLElement} */$el) => {
|
|
1550
|
+
const node = newState.getNode($el);
|
|
1551
|
+
// Don't animate translate for inlined elements (to avoid text reflow)
|
|
1552
|
+
if (node.isInlined) return '0px 0px';
|
|
1553
|
+
return `${newState.getComputedValue($el, 'x')}px ${newState.getComputedValue($el, 'y')}px`;
|
|
1554
|
+
},
|
|
1527
1555
|
transform: (/** @type {HTMLElement} */$el) => {
|
|
1528
1556
|
const newValue = newState.getComputedValue($el, 'transform');
|
|
1529
1557
|
if (!animatedSwap.includes($el)) return newValue;
|
|
@@ -1532,7 +1560,7 @@ class AutoLayout {
|
|
|
1532
1560
|
return [oldValue, values.getFunctionValue(swapAtProps.transform, $el, node.index, node.total), newValue]
|
|
1533
1561
|
},
|
|
1534
1562
|
autoplay: false,
|
|
1535
|
-
persist: true,
|
|
1563
|
+
// persist: true,
|
|
1536
1564
|
...timingParams,
|
|
1537
1565
|
});
|
|
1538
1566
|
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.6
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -23,6 +23,12 @@ import { scope, defaults } from '../core/globals.js';
|
|
|
23
23
|
* } from '../types/index.js'
|
|
24
24
|
*/
|
|
25
25
|
|
|
26
|
+
/**
|
|
27
|
+
* @import {
|
|
28
|
+
* ScrollObserver,
|
|
29
|
+
* } from '../events/scroll.js'
|
|
30
|
+
*/
|
|
31
|
+
|
|
26
32
|
/**
|
|
27
33
|
* @import {
|
|
28
34
|
* Timeline,
|
|
@@ -1073,6 +1079,12 @@ class AutoLayout {
|
|
|
1073
1079
|
}
|
|
1074
1080
|
}
|
|
1075
1081
|
tlParams.onComplete = () => {
|
|
1082
|
+
const ap = /** @type {ScrollObserver} */(params.autoplay);
|
|
1083
|
+
const isScrollControled = ap && ap.linked;
|
|
1084
|
+
if (isScrollControled) {
|
|
1085
|
+
if (onComplete) onComplete(this.timeline);
|
|
1086
|
+
return;
|
|
1087
|
+
}
|
|
1076
1088
|
// Make sure to call .cancel() after restoreNodeInlineStyles(node); otehrwise the commited styles get reverted
|
|
1077
1089
|
if (this.transformAnimation) this.transformAnimation.cancel();
|
|
1078
1090
|
newState.forEachRootNode(node => {
|
|
@@ -1094,6 +1106,13 @@ class AutoLayout {
|
|
|
1094
1106
|
});
|
|
1095
1107
|
};
|
|
1096
1108
|
tlParams.onPause = () => {
|
|
1109
|
+
const ap = /** @type {ScrollObserver} */(params.autoplay);
|
|
1110
|
+
const isScrollControled = ap && ap.linked;
|
|
1111
|
+
if (isScrollControled) {
|
|
1112
|
+
if (onComplete) onComplete(this.timeline);
|
|
1113
|
+
if (onPause) onPause(this.timeline);
|
|
1114
|
+
return;
|
|
1115
|
+
}
|
|
1097
1116
|
if (!this.root.classList.contains('is-animated')) return;
|
|
1098
1117
|
if (this.transformAnimation) this.transformAnimation.cancel();
|
|
1099
1118
|
newState.forEachRootNode(restoreNodeVisualState);
|
|
@@ -1307,7 +1326,7 @@ class AutoLayout {
|
|
|
1307
1326
|
// const hiddenStateChanged = (topLevelAdded || newlyRemoved) && wasRemovedBefore !== isRemovedNow;
|
|
1308
1327
|
|
|
1309
1328
|
if (node.isTarget && (!node.measuredIsRemoved && oldStateNode.measuredIsVisible || node.measuredIsRemoved && node.measuredIsVisible)) {
|
|
1310
|
-
if (
|
|
1329
|
+
if (nodeProperties.transform !== 'none' || oldStateNodeProperties.transform !== 'none') {
|
|
1311
1330
|
node.hasTransform = true;
|
|
1312
1331
|
transformed.push($el);
|
|
1313
1332
|
}
|
|
@@ -1323,7 +1342,7 @@ class AutoLayout {
|
|
|
1323
1342
|
if (!node.isTarget) {
|
|
1324
1343
|
swapping.push($el);
|
|
1325
1344
|
if (node.sizeChanged && parent && parent.isTarget && parent.sizeChanged) {
|
|
1326
|
-
if (
|
|
1345
|
+
if (swapAtProps.transform) {
|
|
1327
1346
|
node.hasTransform = true;
|
|
1328
1347
|
transformed.push($el);
|
|
1329
1348
|
}
|
|
@@ -1363,7 +1382,7 @@ class AutoLayout {
|
|
|
1363
1382
|
|
|
1364
1383
|
// muteNodeTransition(newNode);
|
|
1365
1384
|
|
|
1366
|
-
// Don't animate
|
|
1385
|
+
// Don't animate positions of inlined elements (to avoid text reflow)
|
|
1367
1386
|
if (!newNode.isInlined) {
|
|
1368
1387
|
// Display grid can mess with the absolute positioning, so set it to block during transition
|
|
1369
1388
|
if (oldNode.measuredDisplay === 'grid' || newNode.measuredDisplay === 'grid') $el.style.setProperty('display', 'block', 'important');
|
|
@@ -1382,14 +1401,15 @@ class AutoLayout {
|
|
|
1382
1401
|
$el.style.left = '0px';
|
|
1383
1402
|
$el.style.top = '0px';
|
|
1384
1403
|
}
|
|
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
1404
|
}
|
|
1405
|
+
// Animate dimensions for all elements (including inlined)
|
|
1406
|
+
$el.style.width = `${oldNodeState.width}px`;
|
|
1407
|
+
$el.style.height = `${oldNodeState.height}px`;
|
|
1408
|
+
// Overrides user defined min and max to prevents width and height clamping
|
|
1409
|
+
$el.style.minWidth = `auto`;
|
|
1410
|
+
$el.style.minHeight = `auto`;
|
|
1411
|
+
$el.style.maxWidth = `none`;
|
|
1412
|
+
$el.style.maxHeight = `none`;
|
|
1393
1413
|
}
|
|
1394
1414
|
|
|
1395
1415
|
// Restore the scroll position if the oldState differs from the current state
|
|
@@ -1410,21 +1430,19 @@ class AutoLayout {
|
|
|
1410
1430
|
const animatedProps = {
|
|
1411
1431
|
composition: 'none',
|
|
1412
1432
|
};
|
|
1413
|
-
if (
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
nodeHasChanged = true;
|
|
1427
|
-
}
|
|
1433
|
+
if (oldNodeState.width !== newNodeState.width) {
|
|
1434
|
+
animatedProps.width = [oldNodeState.width, newNodeState.width];
|
|
1435
|
+
nodeHasChanged = true;
|
|
1436
|
+
}
|
|
1437
|
+
if (oldNodeState.height !== newNodeState.height) {
|
|
1438
|
+
animatedProps.height = [oldNodeState.height, newNodeState.height];
|
|
1439
|
+
nodeHasChanged = true;
|
|
1440
|
+
}
|
|
1441
|
+
// If the node has transforms we handle the translate animation in waapi otherwise translate and other transforms can be out of sync
|
|
1442
|
+
// And we don't animate the position of inlined elements
|
|
1443
|
+
if (!newNode.hasTransform && !newNode.isInlined) {
|
|
1444
|
+
animatedProps.translate = [`${oldNodeState.x}px ${oldNodeState.y}px`, `${newNodeState.x}px ${newNodeState.y}px`];
|
|
1445
|
+
nodeHasChanged = true;
|
|
1428
1446
|
}
|
|
1429
1447
|
this.properties.forEach(prop => {
|
|
1430
1448
|
const oldVal = oldNodeState[prop];
|
|
@@ -1446,15 +1464,16 @@ class AutoLayout {
|
|
|
1446
1464
|
for (let i = 0, l = swapping.length; i < l; i++) {
|
|
1447
1465
|
const $el = swapping[i];
|
|
1448
1466
|
const oldNode = oldState.getNode($el);
|
|
1467
|
+
const oldNodeProps = oldNode.properties;
|
|
1468
|
+
$el.style.width = `${oldNodeProps.width}px`;
|
|
1469
|
+
$el.style.height = `${oldNodeProps.height}px`;
|
|
1470
|
+
// Overrides user defined min and max to prevents width and height clamping
|
|
1471
|
+
$el.style.minWidth = `auto`;
|
|
1472
|
+
$el.style.minHeight = `auto`;
|
|
1473
|
+
$el.style.maxWidth = `none`;
|
|
1474
|
+
$el.style.maxHeight = `none`;
|
|
1475
|
+
// We don't animate the position of inlined elements
|
|
1449
1476
|
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
1477
|
$el.style.translate = `${oldNodeProps.x}px ${oldNodeProps.y}px`;
|
|
1459
1478
|
}
|
|
1460
1479
|
this.properties.forEach(prop => {
|
|
@@ -1469,14 +1488,15 @@ class AutoLayout {
|
|
|
1469
1488
|
const newNode = newState.getNode($el);
|
|
1470
1489
|
const newNodeProps = newNode.properties;
|
|
1471
1490
|
this.timeline.call(() => {
|
|
1491
|
+
$el.style.width = `${newNodeProps.width}px`;
|
|
1492
|
+
$el.style.height = `${newNodeProps.height}px`;
|
|
1493
|
+
// Overrides user defined min and max to prevents width and height clamping
|
|
1494
|
+
$el.style.minWidth = `auto`;
|
|
1495
|
+
$el.style.minHeight = `auto`;
|
|
1496
|
+
$el.style.maxWidth = `none`;
|
|
1497
|
+
$el.style.maxHeight = `none`;
|
|
1498
|
+
// Don't set translate for inlined elements (to avoid text reflow)
|
|
1472
1499
|
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
1500
|
$el.style.translate = `${newNodeProps.x}px ${newNodeProps.y}px`;
|
|
1481
1501
|
}
|
|
1482
1502
|
this.properties.forEach(prop => {
|
|
@@ -1509,19 +1529,27 @@ class AutoLayout {
|
|
|
1509
1529
|
const transformedLength = transformed.length;
|
|
1510
1530
|
|
|
1511
1531
|
if (transformedLength) {
|
|
1512
|
-
// We only need to set the transform property here since translate is
|
|
1532
|
+
// We only need to set the transform property here since translate is already defined in the targets loop
|
|
1513
1533
|
for (let i = 0; i < transformedLength; i++) {
|
|
1514
1534
|
const $el = transformed[i];
|
|
1515
|
-
|
|
1535
|
+
const node = newState.getNode($el);
|
|
1536
|
+
// Don't set translate for inlined elements (to avoid text reflow)
|
|
1537
|
+
if (!node.isInlined) {
|
|
1538
|
+
$el.style.translate = `${oldState.getComputedValue($el, 'x')}px ${oldState.getComputedValue($el, 'y')}px`;
|
|
1539
|
+
}
|
|
1516
1540
|
$el.style.transform = oldState.getComputedValue($el, 'transform');
|
|
1517
1541
|
if (animatedSwap.includes($el)) {
|
|
1518
|
-
const node = newState.getNode($el);
|
|
1519
1542
|
node.ease = getFunctionValue(swapAtParams.ease, $el, node.index, node.total);
|
|
1520
1543
|
node.duration = getFunctionValue(swapAtParams.duration, $el, node.index, node.total);
|
|
1521
1544
|
}
|
|
1522
1545
|
}
|
|
1523
1546
|
this.transformAnimation = waapi.animate(transformed, {
|
|
1524
|
-
translate: (/** @type {HTMLElement} */$el) =>
|
|
1547
|
+
translate: (/** @type {HTMLElement} */$el) => {
|
|
1548
|
+
const node = newState.getNode($el);
|
|
1549
|
+
// Don't animate translate for inlined elements (to avoid text reflow)
|
|
1550
|
+
if (node.isInlined) return '0px 0px';
|
|
1551
|
+
return `${newState.getComputedValue($el, 'x')}px ${newState.getComputedValue($el, 'y')}px`;
|
|
1552
|
+
},
|
|
1525
1553
|
transform: (/** @type {HTMLElement} */$el) => {
|
|
1526
1554
|
const newValue = newState.getComputedValue($el, 'transform');
|
|
1527
1555
|
if (!animatedSwap.includes($el)) return newValue;
|
|
@@ -1530,7 +1558,7 @@ class AutoLayout {
|
|
|
1530
1558
|
return [oldValue, getFunctionValue(swapAtProps.transform, $el, node.index, node.total), newValue]
|
|
1531
1559
|
},
|
|
1532
1560
|
autoplay: false,
|
|
1533
|
-
persist: true,
|
|
1561
|
+
// persist: true,
|
|
1534
1562
|
...timingParams,
|
|
1535
1563
|
});
|
|
1536
1564
|
this.timeline.sync(this.transformAnimation, 0);
|