@visactor/vrender-components 1.1.0-alpha.6 → 1.1.0-alpha.8

package/dist/index.es.js

@@ -5240,11 +5240,23 @@ class StateTransitionOrchestrator {
     if (!hasAnimation) return plan;
     const noWorkAnimateAttr = Object.assign(Object.assign({}, null !== (_a = options.noWorkAnimateAttr) && void 0 !== _a ? _a : {}), normalizeNoAnimateAttrConfig(null === (_b = options.animateConfig) || void 0 === _b ? void 0 : _b.noAnimateAttrs)),
       isClear = !0 === options.isClear,
-      getDefaultAttribute = options.getDefaultAttribute;
+      getDefaultAttribute = options.getDefaultAttribute,
+      shouldSkipDefaultAttribute = options.shouldSkipDefaultAttribute,
+      assignTransitionAttr = (key, value) => {
+        if (noWorkAnimateAttr[key]) return plan.jumpAttrs[key] = value, void (plan.noAnimateAttrs[key] = value);
+        if (isClear && void 0 === value) {
+          if (null == shouldSkipDefaultAttribute ? void 0 : shouldSkipDefaultAttribute(key, targetAttrs)) return;
+          plan.animateAttrs[key] = getDefaultAttribute ? getDefaultAttribute(key) : value;
+        } else plan.animateAttrs[key] = value;
+      };
     for (const key in targetAttrs) {
       if (!Object.prototype.hasOwnProperty.call(targetAttrs, key)) continue;
-      const value = targetAttrs[key];
-      noWorkAnimateAttr[key] ? (plan.jumpAttrs[key] = value, plan.noAnimateAttrs[key] = value) : plan.animateAttrs[key] = isClear && void 0 === value && getDefaultAttribute ? getDefaultAttribute(key) : value;
+      assignTransitionAttr(key, targetAttrs[key]);
+    }
+    const extraAnimateAttrs = options.extraAnimateAttrs;
+    if (extraAnimateAttrs) for (const key in extraAnimateAttrs) {
+      const hasTargetAttr = Object.prototype.hasOwnProperty.call(targetAttrs, key);
+      !Object.prototype.hasOwnProperty.call(extraAnimateAttrs, key) || hasTargetAttr && void 0 !== targetAttrs[key] || assignTransitionAttr(key, extraAnimateAttrs[key]);
     }
     return plan;
   }
@@ -5271,12 +5283,14 @@ class StateTransitionOrchestrator {
     }), plan;
   }
   applyClearTransition(graphic, targetAttrs, hasAnimation, stateNames, options = {}) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const plan = this.analyzeTransition({}, targetAttrs, stateNames, hasAnimation, {
       noWorkAnimateAttr: null === (_a = graphic.getNoWorkAnimateAttr) || void 0 === _a ? void 0 : _a.call(graphic),
       isClear: !0,
       getDefaultAttribute: null === (_b = graphic.getDefaultAttribute) || void 0 === _b ? void 0 : _b.bind(graphic),
-      animateConfig: options.animateConfig
+      shouldSkipDefaultAttribute: null !== (_c = options.shouldSkipDefaultAttribute) && void 0 !== _c ? _c : null === (_d = graphic.shouldSkipStateTransitionDefaultAttribute) || void 0 === _d ? void 0 : _d.bind(graphic),
+      animateConfig: options.animateConfig,
+      extraAnimateAttrs: options.extraAnimateAttrs
     });
     return this.applyTransition(graphic, plan, hasAnimation, options);
   }
@@ -5592,13 +5606,22 @@ class Graphic extends Node {
       "deep" === this.stateMergeMode && isPlainObjectValue(previousValue) && isPlainObjectValue(nextValue) ? snapshot[key] = deepMergeAttributeValue(previousValue, nextValue) : snapshot[key] = cloneAttributeValue(nextValue);
     }), snapshot) : snapshot;
   }
-  buildStateAnimationTargetAttrs(resolvedStateAttrs, previousResolvedStatePatch) {
-    const targetAttrs = cloneAttributeValue(resolvedStateAttrs);
-    if (!previousResolvedStatePatch) return targetAttrs;
-    const snapshot = this.buildStaticAttributeSnapshot();
+  buildRemovedStateAnimationAttrs(targetStateAttrs, previousResolvedStatePatch) {
+    const extraAttrs = {};
+    if (!previousResolvedStatePatch) return extraAttrs;
+    const snapshot = this.buildStaticAttributeSnapshot(),
+      staticTargetAttrs = snapshot;
     return Object.keys(previousResolvedStatePatch).forEach(key => {
-      Object.prototype.hasOwnProperty.call(targetAttrs, key) || (targetAttrs[key] = Object.prototype.hasOwnProperty.call(snapshot, key) ? cloneAttributeValue(snapshot[key]) : this.getDefaultAttribute(key));
-    }), targetAttrs;
+      const hasTargetAttr = Object.prototype.hasOwnProperty.call(targetStateAttrs, key);
+      if (hasTargetAttr && void 0 !== targetStateAttrs[key]) return;
+      const assignFallbackAttr = value => {
+        void 0 === value && this.shouldSkipStateTransitionDefaultAttribute(key, staticTargetAttrs) || (extraAttrs[key] = void 0 === value ? value : cloneAttributeValue(value));
+      };
+      if (hasTargetAttr) assignFallbackAttr(this.getStateTransitionDefaultAttribute(key, staticTargetAttrs));else if (Object.prototype.hasOwnProperty.call(snapshot, key)) {
+        const snapshotValue = snapshot[key];
+        assignFallbackAttr(void 0 === snapshotValue ? this.getStateTransitionDefaultAttribute(key, staticTargetAttrs) : snapshotValue);
+      } else assignFallbackAttr(this.getStateTransitionDefaultAttribute(key, staticTargetAttrs));
+    }), extraAttrs;
   }
   syncObjectToSnapshot(target, snapshot) {
     const delta = new Map();
@@ -6021,21 +6044,31 @@ class Graphic extends Node {
     var _a, _b, _c;
     return null !== (_c = null !== (_a = null != animateConfig ? animateConfig : this.stateAnimateConfig) && void 0 !== _a ? _a : null === (_b = this.context) || void 0 === _b ? void 0 : _b.stateAnimateConfig) && void 0 !== _c ? _c : DefaultStateAnimateConfig;
   }
-  applyStateAttrs(attrs, stateNames, hasAnimation, isClear, animateConfig) {
+  applyStateAttrs(attrs, stateNames, hasAnimation, isClear, animateConfig, extraAnimateAttrs) {
     const resolvedAnimateConfig = hasAnimation ? this.resolveStateAnimateConfig(animateConfig) : void 0,
       transitionOptions = resolvedAnimateConfig ? {
-        animateConfig: resolvedAnimateConfig
+        animateConfig: resolvedAnimateConfig,
+        extraAnimateAttrs: extraAnimateAttrs,
+        shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this)
       } : void 0;
     if (isClear) return void this.getStateTransitionOrchestrator().applyClearTransition(this, attrs, hasAnimation, stateNames, transitionOptions);
     const plan = this.getStateTransitionOrchestrator().analyzeTransition({}, attrs, stateNames, hasAnimation, {
       noWorkAnimateAttr: this.getNoWorkAnimateAttr(),
-      animateConfig: resolvedAnimateConfig
+      animateConfig: resolvedAnimateConfig,
+      extraAnimateAttrs: extraAnimateAttrs,
+      shouldSkipDefaultAttribute: this.shouldSkipStateTransitionDefaultAttribute.bind(this)
     });
     this.getStateTransitionOrchestrator().applyTransition(this, plan, hasAnimation, transitionOptions);
   }
   updateNormalAttrs(stateAttrs) {
     this._deprecatedNormalAttrsView = cloneAttributeValue(this.baseAttributes);
   }
+  getStateTransitionDefaultAttribute(key, targetAttrs) {
+    return this.getDefaultAttribute(key);
+  }
+  shouldSkipStateTransitionDefaultAttribute(_key, _targetAttrs) {
+    return !1;
+  }
   stopStateAnimates(type = "end") {
     const stopAnimationState = this.stopAnimationState;
     if ("function" == typeof stopAnimationState) return void stopAnimationState.call(this, "state", type);
@@ -6052,13 +6085,14 @@ class Graphic extends Node {
   clearStates(hasAnimation) {
     var _a, _b, _c;
     const previousStates = this.currentStates ? this.currentStates.slice() : [],
+      previousResolvedStatePatch = this.resolvedStatePatch ? cloneAttributeValue(this.resolvedStatePatch) : void 0,
       transition = this.createStateModel().clearStates();
     if (!transition.changed && 0 === previousStates.length) return this.currentStates = [], this.effectiveStates = [], this.resolvedStatePatch = void 0, this.sharedStateDirty = !1, void this.clearSharedStateActiveRegistrations();
     const resolvedStateAttrs = cloneAttributeValue(null !== (_a = this.baseAttributes) && void 0 !== _a ? _a : {});
     transition.changed && !this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !0) || (this.currentStates = transition.states, this.effectiveStates = [], this.resolvedStatePatch = void 0, this.sharedStateDirty = !1, this.clearSharedStateActiveRegistrations(), null === (_b = getStageStatePerfMonitor(this.stage)) || void 0 === _b || _b.incrementCounter("stateCommits"), null === (_c = getStageStatePerfMonitor(this.stage)) || void 0 === _c || _c.recordEvent("state-commit", {
       graphicId: this._uid,
       targetStates: []
-    }), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !0)) : (this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
+    }), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !0, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
       type: AttributeUpdateType.STATE
     }), this._emitCustomEvent("afterStateUpdate", {
       type: AttributeUpdateType.STATE
@@ -6091,7 +6125,7 @@ class Graphic extends Node {
     this.beforeStateUpdate(resolvedStateAttrs, previousStates, transition.states, hasAnimation, !1) && (this.currentStates = transition.states, this.effectiveStates = [...effectiveStates], this.resolvedStatePatch = Object.assign({}, resolvedStateAttrs), this.sharedStateDirty = !1, this.syncSharedStateActiveRegistrations(), null === (_d = getStageStatePerfMonitor(this.stage)) || void 0 === _d || _d.incrementCounter("stateCommits"), null === (_e = getStageStatePerfMonitor(this.stage)) || void 0 === _e || _e.recordEvent("state-commit", {
       graphicId: this._uid,
       targetStates: [...transition.states]
-    }), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(this.buildStateAnimationTargetAttrs(resolvedStateAttrs, previousResolvedStatePatch), transition.states, hasAnimation)) : (this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
+    }), hasAnimation ? (this._syncFinalAttributeFromStaticTruth(), this.applyStateAttrs(resolvedStateAttrs, transition.states, hasAnimation, !1, void 0, this.buildRemovedStateAnimationAttrs(resolvedStateAttrs, previousResolvedStatePatch))) : (this.stopStateAnimates(), this._restoreAttributeFromStaticTruth({
       type: AttributeUpdateType.STATE
     }), this._emitCustomEvent("afterStateUpdate", {
       type: AttributeUpdateType.STATE
@@ -7510,6 +7544,52 @@ class Rect extends Graphic {
   needUpdateTag(key) {
     return super.needUpdateTag(key, RECT_UPDATE_TAG_KEY);
   }
+  shouldSkipStateTransitionDefaultAttribute(key, targetAttrs) {
+    var _a;
+    const attrs = null !== (_a = null != targetAttrs ? targetAttrs : this.baseAttributes) && void 0 !== _a ? _a : this.attribute,
+      hasValue = attrKey => null != attrs[attrKey],
+      isNilValue = attrKey => null == attrs[attrKey];
+    switch (key) {
+      case "width":
+        return isNilValue("width") && hasValue("x") && hasValue("x1");
+      case "height":
+        return isNilValue("height") && hasValue("y") && hasValue("y1");
+      case "x1":
+        return isNilValue("x1") && hasValue("x") && hasValue("width");
+      case "y1":
+        return isNilValue("y1") && hasValue("y") && hasValue("height");
+      default:
+        return !1;
+    }
+  }
+  getStateTransitionDefaultAttribute(key, targetAttrs) {
+    var _a;
+    const attrs = null !== (_a = null != targetAttrs ? targetAttrs : this.baseAttributes) && void 0 !== _a ? _a : this.attribute,
+      getNumber = attrKey => {
+        const value = attrs[attrKey];
+        return "number" == typeof value && Number.isFinite(value) ? value : void 0;
+      },
+      x = getNumber("x"),
+      y = getNumber("y"),
+      x1 = getNumber("x1"),
+      y1 = getNumber("y1"),
+      width = getNumber("width"),
+      height = getNumber("height");
+    switch (key) {
+      case "width":
+        if (null == width && null != x && null != x1) return x1 - x;
+        break;
+      case "height":
+        if (null == height && null != y && null != y1) return y1 - y;
+        break;
+      case "x1":
+        if (null == x1 && null != x && null != width) return x + width;
+        break;
+      case "y1":
+        if (null == y1 && null != y && null != height) return y + height;
+    }
+    return super.getStateTransitionDefaultAttribute(key, targetAttrs);
+  }
   toCustomPath() {
     let path = super.toCustomPath();
     if (path) return path;
@@ -18250,6 +18330,26 @@ class AnimateComponent extends AbstractComponent {
     }
 }
 
+function commitUpdateAnimationTarget(graphic, targetAttrs, startAttrs) {
+    var _a, _b, _c, _d;
+    if (!graphic || !targetAttrs) {
+        return;
+    }
+    const committedTargetAttrs = cloneDeep(targetAttrs);
+    const transientStartAttrs = cloneDeep(startAttrs !== null && startAttrs !== void 0 ? startAttrs : graphic.attribute);
+    graphic.setAttributes(committedTargetAttrs);
+    const baseAttributes = graphic.baseAttributes;
+    if (baseAttributes && typeof baseAttributes === 'object') {
+        Object.keys(committedTargetAttrs).forEach(key => {
+            baseAttributes[key] = cloneDeep(committedTargetAttrs[key]);
+        });
+    }
+    (_b = (_a = graphic).setFinalAttributes) === null || _b === void 0 ? void 0 : _b.call(_a, committedTargetAttrs);
+    (_d = (_c = graphic).setAttributesAndPreventAnimate) === null || _d === void 0 ? void 0 : _d.call(_c, transientStartAttrs, false, {
+        type: AttributeUpdateType.ANIMATE_BIND
+    });
+}
+
 const DefaultAxisAnimation = {
     type: 'default',
     duration: 300,
@@ -18651,11 +18751,10 @@ class AxisBase extends AnimateComponent {
                 var _a;
                 if (el.type !== 'group' && el.id) {
                     const oldEl = prevInnerView[el.id];
-                    el.setFinalAttributes(el.attribute);
                     if (oldEl) {
                         oldEl.release();
-                        const oldAttrs = oldEl.attribute;
-                        const finalAttrs = el.getFinalAttribute();
+                        const oldAttrs = cloneDeep(oldEl.attribute);
+                        const finalAttrs = cloneDeep(el.attribute);
                         const diffAttrs = diff(oldAttrs, finalAttrs);
                         let hasDiff = Object.keys(diffAttrs).length > 0;
                         if ('opacity' in oldAttrs && finalAttrs.opacity !== oldAttrs.opacity) {
@@ -18666,10 +18765,9 @@ class AxisBase extends AnimateComponent {
                             this._newElementAttrMap[el.id] = {
                                 state: 'update',
                                 node: el,
-                                attrs: el.attribute
+                                attrs: finalAttrs
                             };
-                            const oldAttrs = oldEl.attribute;
-                            el.setAttributes(oldAttrs);
+                            commitUpdateAnimationTarget(el, finalAttrs, oldAttrs);
                             el.applyAnimationState(['update'], [
                                 {
                                     name: 'update',
@@ -19843,7 +19941,7 @@ class Animate {
     if (nextTime >= this._startTime + this._totalDuration) {
       null === (_a = this._lastStep) || void 0 === _a || _a.onUpdate(!0, 1, {}), null === (_b = this._lastStep) || void 0 === _b || _b.onEnd(), this.onEnd(), this.status = AnimateStatus.END;
       const trackerTarget = this.target;
-      return void ("function" == typeof (null == trackerTarget ? void 0 : trackerTarget.restoreStaticAttribute) && trackerTarget.restoreStaticAttribute());
+      return "function" == typeof (null == trackerTarget ? void 0 : trackerTarget.restoreStaticAttribute) && trackerTarget.restoreStaticAttribute(), void (this.__skipRestoreStaticAttributeOnRemove = !0);
     }
     this.status = AnimateStatus.RUNNING, this.currentTime <= this._startTime && this.onStart(), this.currentTime = nextTime;
     let cycleTime = nextTime - this._startTime,
@@ -20852,7 +20950,7 @@ class AxisEnter extends AComponentAnimate {
             const point = getTickCoord(oldValue);
             const newX = this.target.attribute.x;
             const newY = this.target.attribute.y;
-            this.target.setAttributes({ x: point.x, y: point.y });
+            commitUpdateAnimationTarget(this.target, { x: newX, y: newY }, { x: point.x, y: point.y });
             animator.animate(this.target, {
                 type: 'to',
                 to: { x: newX, y: newY },
@@ -20875,7 +20973,8 @@ class AxisUpdate extends AComponentAnimate {
         this._animator = animator;
         const duration = this.duration;
         const easing = this.easing;
-        const { config, diffAttrs } = this.params;
+        const { diffAttrs } = this.params;
+        commitUpdateAnimationTarget(this.target, Object.assign({}, diffAttrs));
         animator.animate(this.target, {
             type: 'to',
             to: Object.assign({}, diffAttrs),
@@ -21922,6 +22021,7 @@ class GroupTransition extends ACustomAnimate {
         this.mode = AnimateMode.NORMAL;
     }
     onBind() {
+        this._started = false;
         const currentInnerView = this.target.getInnerView();
         const prevInnerView = this.target.getPrevInnerView();
         if (!prevInnerView) {
@@ -21940,7 +22040,7 @@ class GroupTransition extends ACustomAnimate {
                             node: el,
                             attrs: Object.assign(Object.assign({}, newProps), { opacity: (_a = newProps.opacity) !== null && _a !== void 0 ? _a : 1, fillOpacity: (_b = newProps.fillOpacity) !== null && _b !== void 0 ? _b : 1, strokeOpacity: (_c = newProps.strokeOpacity) !== null && _c !== void 0 ? _c : 1 })
                         };
-                        el.setAttributes(oldEl.attribute);
+                        commitUpdateAnimationTarget(el, this._newElementAttrMap[el.id].attrs, cloneDeep(oldEl.attribute));
                     }
                 }
                 else {
@@ -21954,7 +22054,7 @@ class GroupTransition extends ACustomAnimate {
                         node: el,
                         attrs: finalOpacityAttrs
                     };
-                    el.setAttributes({
+                    commitUpdateAnimationTarget(el, finalOpacityAttrs, {
                         opacity: 0,
                         fillOpacity: 0,
                         strokeOpacity: 0
@@ -21964,6 +22064,10 @@ class GroupTransition extends ACustomAnimate {
         });
     }
     onStart() {
+        if (this._started) {
+            return;
+        }
+        this._started = true;
         let duration = this.duration;
         let easing = this.easing;
         this._newElementAttrMap &&
@@ -24079,6 +24183,8 @@ class LabelBase extends AnimateComponent {
     _runUpdateAnimation(prevLabel, currentLabel) {
         const { text: prevText, labelLine: prevLabelLine } = prevLabel;
         const { text: curText, labelLine: curLabelLine } = currentLabel;
+        commitUpdateAnimationTarget(prevText, curText === null || curText === void 0 ? void 0 : curText.attribute);
+        commitUpdateAnimationTarget(prevLabelLine, curLabelLine === null || curLabelLine === void 0 ? void 0 : curLabelLine.attribute);
         prevText.applyAnimationState(['update'], [
             {
                 name: 'update',
@@ -24110,7 +24216,7 @@ class LabelBase extends AnimateComponent {
         this.runEnterAnimation(text, labelLine);
     }
     _updateLabel(prevLabel, currentLabel) {
-        const { text: prevText, labelLine: prevLabelLine } = prevLabel;
+        const { labelLine: prevLabelLine } = prevLabel;
         const { text: curText, labelLine: curLabelLine } = currentLabel;
         if (this._enableAnimation === false || this._animationConfig.update === false) {
             prevLabel.text.setAttributes(curText.attribute);
@@ -27006,7 +27112,10 @@ function graphicFadeIn(graphic, delay, duration, easing) {
     (_a = graphic === null || graphic === void 0 ? void 0 : graphic.animates) === null || _a === void 0 ? void 0 : _a.forEach(a => a.stop('end'));
     const fillOpacityConfig = (_c = (_b = graphic.attribute) === null || _b === void 0 ? void 0 : _b.fillOpacity) !== null && _c !== void 0 ? _c : 1;
     const strokeOpacityConfig = (_e = (_d = graphic.attribute) === null || _d === void 0 ? void 0 : _d.strokeOpacity) !== null && _e !== void 0 ? _e : 1;
-    graphic.setAttributes({
+    commitUpdateAnimationTarget(graphic, {
+        fillOpacity: fillOpacityConfig,
+        strokeOpacity: strokeOpacityConfig
+    }, {
         fillOpacity: 0,
         strokeOpacity: 0
     });
@@ -27036,7 +27145,10 @@ function graphicFadeOut(graphic, delay, duration, easing) {
     if (!graphic) {
         return;
     }
-    graphic.setAttributes({
+    commitUpdateAnimationTarget(graphic, {
+        fillOpacity: 0,
+        strokeOpacity: 0
+    }, {
         fillOpacity: (_b = (_a = graphic.attribute) === null || _a === void 0 ? void 0 : _a.fillOpacity) !== null && _b !== void 0 ? _b : 1,
         strokeOpacity: (_d = (_c = graphic.attribute) === null || _c === void 0 ? void 0 : _c.strokeOpacity) !== null && _d !== void 0 ? _d : 1
     });
@@ -27065,7 +27177,7 @@ function commonLineClipIn(line, label, duration, delay, easing) {
     const endSymbolDuration = 0.1 * duration;
     const labelDuration = 0.1 * duration;
     graphicFadeIn(line.startSymbol, delay, startSymbolDuration, easing);
-    line.lines.forEach(line => line.setAttribute('clipRange', 0));
+    line.lines.forEach(line => commitUpdateAnimationTarget(line, { clipRange: 1 }, { clipRange: 0 }));
     line.lines.forEach((l, index) => {
         const stepDuration = lineDuration / line.lines.length;
         l.animate()
@@ -27148,7 +27260,7 @@ function pointCallIn(itemLine, decorativeLine, item, duration, delay, easing) {
     const endSymbolDuration = 0.1 * duration;
     const labelDuration = 0.1 * duration;
     graphicFadeIn(itemLine.startSymbol, delay, startSymbolDuration, easing);
-    itemLine.lines.forEach(line => line.setAttribute('clipRange', 0));
+    itemLine.lines.forEach(line => commitUpdateAnimationTarget(line, { clipRange: 1 }, { clipRange: 0 }));
     itemLine.lines.forEach((l, index) => {
         const stepDuration = lineDuration / itemLine.lines.length;
         l.animate()
@@ -29647,9 +29759,9 @@ class DiscreteLegend extends LegendBase {
             }
             if (!this._itemContext.isScrollbar) {
                 if (animation) {
-                    this._itemsContainer
-                        .animate()
-                        .to({ [channel]: -(newPage - 1) * pageSize }, animationDuration, animationEasing);
+                    const attrs = { [channel]: -(newPage - 1) * pageSize };
+                    commitUpdateAnimationTarget(this._itemsContainer, attrs);
+                    this._itemsContainer.animate().to(attrs, animationDuration, animationEasing);
                 }
                 else {
                     this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
@@ -29667,7 +29779,9 @@ class DiscreteLegend extends LegendBase {
                 const startOffset = containerSize * start;
                 this.updateScrollMask();
                 if (animation) {
-                    this._itemsContainer.animate().to({ [channel]: -startOffset }, animationDuration, animationEasing);
+                    const attrs = { [channel]: -startOffset };
+                    commitUpdateAnimationTarget(this._itemsContainer, attrs);
+                    this._itemsContainer.animate().to(attrs, animationDuration, animationEasing);
                 }
                 else {
                     this._itemsContainer.setAttribute(channel, -startOffset);
@@ -33620,6 +33734,7 @@ class Timeline extends AbstractComponent {
         setActive(symbolGroup, activeSymbolStyle);
     }
     appearAnimate(animateConfig) {
+        var _a;
         const { duration = 1000, easing = 'quadOut' } = animateConfig;
         const { activeLabelStyle, activeSymbolStyle } = this.attribute;
         const percent = duration / 1000;
@@ -33630,30 +33745,33 @@ class Timeline extends AbstractComponent {
         const symbolDelay = percent * 100;
         const symbolNormalDelay = percent * 600;
         if (this._line) {
-            this._line.setAttributes({ clipRange: 0 });
+            commitUpdateAnimationTarget(this._line, { clipRange: 1 }, { clipRange: 0 });
             this._line.animate().to({ clipRange: 1 }, lineDuration, easing);
         }
         if (this._activeLine) {
-            this._activeLine.setAttributes({ opacity: 0 });
+            const opacity = (_a = this._activeLine.attribute.opacity) !== null && _a !== void 0 ? _a : 1;
+            commitUpdateAnimationTarget(this._activeLine, { opacity }, { opacity: 0 });
             this._activeLine
                 .animate()
                 .wait(500)
-                .to({ opacity: 1 }, activeLineDuration, easing);
+                .to({ opacity }, activeLineDuration, easing);
         }
         if (this._symbolGroup) {
             const size = this._symbolGroup.count - 1;
             const delay = percent * (size === 1 ? 0 : (500 - 100) / (size - 1));
             const delayNormal = percent * (size === 1 ? 0 : (400 - 160) / (size - 1));
             this._symbolGroup.forEachChildren((symbol, i) => {
+                var _a;
                 const originAttrs = {};
                 Object.keys(activeSymbolStyle).forEach(k => {
                     originAttrs[k] = symbol.attribute[k];
                 });
-                symbol.setAttributes({ opacity: 0 });
+                const opacity = (_a = symbol.attribute.opacity) !== null && _a !== void 0 ? _a : 1;
+                commitUpdateAnimationTarget(symbol, { opacity }, { opacity: 0 });
                 symbol
                     .animate()
                     .wait(symbolDelay + delay * i)
-                    .to({ opacity: 1 }, perSymbolDuration, easing);
+                    .to({ opacity }, perSymbolDuration, easing);
                 symbol
                     .animate()
                     .wait(symbolNormalDelay + delayNormal * i)
@@ -33666,15 +33784,17 @@ class Timeline extends AbstractComponent {
             const delay = percent * (size === 1 ? 0 : (500 - 100) / (size - 1));
             const delayNormal = percent * (size === 1 ? 0 : (400 - 160) / (size - 1));
             this._labelGroup.forEachChildren((label, i) => {
+                var _a;
                 const originAttrs = {};
                 Object.keys(activeLabelStyle).forEach(k => {
                     originAttrs[k] = label.attribute[k];
                 });
-                label.setAttributes({ opacity: 0 });
+                const opacity = (_a = label.attribute.opacity) !== null && _a !== void 0 ? _a : 1;
+                commitUpdateAnimationTarget(label, { opacity }, { opacity: 0 });
                 label
                     .animate()
                     .wait(symbolDelay + delay * i)
-                    .to({ opacity: 1 }, perSymbolDuration, easing);
+                    .to({ opacity }, perSymbolDuration, easing);
                 label
                     .animate()
                     .wait(symbolNormalDelay + delayNormal * i)
@@ -33714,6 +33834,7 @@ class Timeline extends AbstractComponent {
         const nextClipRange = flag > 0 ? this._timesPercent[i] || 1 : this._timesPercent[i - 1] || 0;
         if (animation) {
             const { duration = 1000, easing = 'quadOut' } = animateConfig;
+            commitUpdateAnimationTarget(this, { clipRange: nextClipRange }, { clipRange });
             this.animate().to({ clipRange: nextClipRange }, duration, easing);
         }
         else {
@@ -35560,6 +35681,6 @@ TableSeriesNumber.defaultAttributes = {
     select: true
 };
 
-const version = "1.1.0-alpha.6";
+const version = "1.1.0-alpha.8";
 
 export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IDataZoomEvent, IDataZoomInteractiveEvent, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PolygonSectorCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SeriesNumberCellStateValue, SeriesNumberEvent, SizeContinuousLegend, Slider, StoryLabelItem, Switch, SymbolLabel, TableSeriesNumber, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, WeatherBox, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, installPoptipToApp, installScrollbarToApp, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };

package/es/animation/axis-animate.js

@@ -1,5 +1,7 @@
 import { AComponentAnimate, AnimateExecutor, createComponentAnimator } from "@visactor/vrender-animate";
 
+import { commitUpdateAnimationTarget } from "./static-truth";
+
 export class AxisEnter extends AComponentAnimate {
     onBind() {
         var _a;
@@ -11,7 +13,10 @@ export class AxisEnter extends AComponentAnimate {
         if (lastScale && getTickCoord && currData) {
             ratio = .7;
             const point = getTickCoord(lastScale.scale(currData.rawValue)), newX = this.target.attribute.x, newY = this.target.attribute.y;
-            this.target.setAttributes({
+            commitUpdateAnimationTarget(this.target, {
+                x: newX,
+                y: newY
+            }, {
                 x: point.x,
                 y: point.y
             }), animator.animate(this.target, {
@@ -37,8 +42,8 @@ export class AxisUpdate extends AComponentAnimate {
     onBind() {
         const animator = createComponentAnimator(this.target);
         this._animator = animator;
-        const duration = this.duration, easing = this.easing, {config: config, diffAttrs: diffAttrs} = this.params;
-        animator.animate(this.target, {
+        const duration = this.duration, easing = this.easing, {diffAttrs: diffAttrs} = this.params;
+        commitUpdateAnimationTarget(this.target, Object.assign({}, diffAttrs)), animator.animate(this.target, {
             type: "to",
             to: Object.assign({}, diffAttrs),
             duration: duration,

package/es/animation/axis-animate.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/animation/axis-animate.ts"],"names":[],"mappings":"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","file":"axis-animate.js","sourcesContent":["import { AComponentAnimate, AnimateExecutor, createComponentAnimator } from '@visactor/vrender-animate';\n\n/**\n * AxisEnter class handles the enter animation for Axis components\n */\nexport class AxisEnter extends AComponentAnimate<any> {\n  onBind(): void {\n    const animator = createComponentAnimator(this.target);\n    this._animator = animator;\n    const duration = this.duration;\n    const easing = this.easing;\n    const { config, lastScale, getTickCoord } = this.params;\n\n    let ratio = 1;\n    const currData = this.target.data;\n    if (lastScale && getTickCoord && currData) {\n      ratio = 0.7;\n\n      const oldValue = lastScale.scale(currData.rawValue);\n      const point = getTickCoord(oldValue);\n      const newX = this.target.attribute.x;\n      const newY = this.target.attribute.y;\n\n      this.target.setAttributes({ x: point.x, y: point.y });\n      animator.animate(this.target, {\n        type: 'to',\n        to: { x: newX, y: newY },\n        duration,\n        easing\n      });\n    }\n\n    // if (updateEls && updateEls.length > 1) {\n    //   ratio = 0.5;\n    //   const oldData1 = updateEls[0].oldEl.data;\n    //   const { rawValue: oldRawValue1, value: oldValue1 } = oldData1;\n    //   const oldData2 = updateEls[1].oldEl.data;\n    //   const { rawValue: oldRawValue2, value: oldValue2 } = oldData2;\n    //   const data = this.target.data;\n    //   const { rawValue: newRawValue } = data;\n    //   // rawValue 是原始值，value是映射出来的值，假设是线性映射，计算一下newRawValue在old阶段的value是什么值\n    //   const oldValue =\n    //     oldValue1 + ((oldValue2 - oldValue1) * (newRawValue - oldRawValue1)) / (oldRawValue2 - oldRawValue1);\n    //   // 将 x 和 y 做映射\n    //   const oldX1 = updateEls[0].oldEl.attribute.x;\n    //   const oldY1 = updateEls[0].oldEl.attribute.y;\n    //   const oldX2 = updateEls[1].oldEl.attribute.x;\n    //   const oldY2 = updateEls[1].oldEl.attribute.y;\n    //   const oldX = oldX1 + ((oldX2 - oldX1) * (oldValue - oldValue1)) / (oldValue2 - oldValue1);\n    //   const oldY = oldY1 + ((oldY2 - oldY1) * (oldValue - oldValue1)) / (oldValue2 - oldValue1);\n    //   const newX = this.target.attribute.x;\n    //   const newY = this.target.attribute.y;\n\n    //   this.target.setAttributes({ x: oldX, y: oldY });\n    //   animator.animate(this.target, {\n    //     type: 'to',\n    //     to: { x: newX, y: newY },\n    //     duration,\n    //     easing\n    //   });\n    // }\n\n    animator.animate(this.target, {\n      type: config.type ?? 'fadeIn',\n      to: config.to,\n      duration: duration * ratio,\n      easing\n    });\n    this.completeBind(animator);\n  }\n}\n\n/**\n * AxisUpdate class handles the update animation for Axis components\n */\nexport class AxisUpdate extends AComponentAnimate<any> {\n  onBind(): void {\n    const animator = createComponentAnimator(this.target);\n    this._animator = animator;\n    const duration = this.duration;\n    const easing = this.easing;\n    const { config, diffAttrs } = this.params;\n    // this.target.applyAnimationState(\n    //   ['update'],\n    //   [\n    //     {\n    //       name: 'update',\n    //       animation: {\n    //         type: 'to',\n    //         to: { ...this.props },\n    //         duration,\n    //         easing,\n    //         customParameters: {\n    //           diffAttrs: { ...this.props }\n    //         }\n    //       }\n    //     }\n    //   ]\n    // );\n    // console.log('this.props', this.props, { ...this.target.attribute });\n    animator.animate(this.target, {\n      type: 'to',\n      to: { ...diffAttrs },\n      duration,\n      easing,\n      customParameters: {\n        diffAttrs: { ...diffAttrs }\n      }\n    });\n    this.completeBind(animator);\n  }\n\n  // 轴动画本身没有逻辑，具体通过animator中执行，所以当需要屏蔽自身属性时，需要通过animator中执行\n  deleteSelfAttr(key: string): void {\n    super.deleteSelfAttr(key);\n    this._animator.deleteSelfAttr(key);\n  }\n\n  // 轴动画本身没有逻辑，具体通过animator中执行，所以本身不需要屏蔽冲突\n  protected tryPreventConflict(): void {\n    return;\n  }\n}\n\nexport function registerAxisAnimate() {\n  // Label update animation\n  AnimateExecutor.registerBuiltInAnimate('axisEnter', AxisEnter);\n  AnimateExecutor.registerBuiltInAnimate('axisUpdate', AxisUpdate);\n}\n"]}
+{"version":3,"sources":["../src/animation/axis-animate.ts"],"names":[],"mappings":"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","file":"axis-animate.js","sourcesContent":["import { AComponentAnimate, AnimateExecutor, createComponentAnimator } from '@visactor/vrender-animate';\nimport { commitUpdateAnimationTarget } from './static-truth';\n\n/**\n * AxisEnter class handles the enter animation for Axis components\n */\nexport class AxisEnter extends AComponentAnimate<any> {\n  onBind(): void {\n    const animator = createComponentAnimator(this.target);\n    this._animator = animator;\n    const duration = this.duration;\n    const easing = this.easing;\n    const { config, lastScale, getTickCoord } = this.params;\n\n    let ratio = 1;\n    const currData = this.target.data;\n    if (lastScale && getTickCoord && currData) {\n      ratio = 0.7;\n\n      const oldValue = lastScale.scale(currData.rawValue);\n      const point = getTickCoord(oldValue);\n      const newX = this.target.attribute.x;\n      const newY = this.target.attribute.y;\n\n      commitUpdateAnimationTarget(this.target, { x: newX, y: newY }, { x: point.x, y: point.y });\n      animator.animate(this.target, {\n        type: 'to',\n        to: { x: newX, y: newY },\n        duration,\n        easing\n      });\n    }\n\n    // if (updateEls && updateEls.length > 1) {\n    //   ratio = 0.5;\n    //   const oldData1 = updateEls[0].oldEl.data;\n    //   const { rawValue: oldRawValue1, value: oldValue1 } = oldData1;\n    //   const oldData2 = updateEls[1].oldEl.data;\n    //   const { rawValue: oldRawValue2, value: oldValue2 } = oldData2;\n    //   const data = this.target.data;\n    //   const { rawValue: newRawValue } = data;\n    //   // rawValue 是原始值，value是映射出来的值，假设是线性映射，计算一下newRawValue在old阶段的value是什么值\n    //   const oldValue =\n    //     oldValue1 + ((oldValue2 - oldValue1) * (newRawValue - oldRawValue1)) / (oldRawValue2 - oldRawValue1);\n    //   // 将 x 和 y 做映射\n    //   const oldX1 = updateEls[0].oldEl.attribute.x;\n    //   const oldY1 = updateEls[0].oldEl.attribute.y;\n    //   const oldX2 = updateEls[1].oldEl.attribute.x;\n    //   const oldY2 = updateEls[1].oldEl.attribute.y;\n    //   const oldX = oldX1 + ((oldX2 - oldX1) * (oldValue - oldValue1)) / (oldValue2 - oldValue1);\n    //   const oldY = oldY1 + ((oldY2 - oldY1) * (oldValue - oldValue1)) / (oldValue2 - oldValue1);\n    //   const newX = this.target.attribute.x;\n    //   const newY = this.target.attribute.y;\n\n    //   this.target.setAttributes({ x: oldX, y: oldY });\n    //   animator.animate(this.target, {\n    //     type: 'to',\n    //     to: { x: newX, y: newY },\n    //     duration,\n    //     easing\n    //   });\n    // }\n\n    animator.animate(this.target, {\n      type: config.type ?? 'fadeIn',\n      to: config.to,\n      duration: duration * ratio,\n      easing\n    });\n    this.completeBind(animator);\n  }\n}\n\n/**\n * AxisUpdate class handles the update animation for Axis components\n */\nexport class AxisUpdate extends AComponentAnimate<any> {\n  onBind(): void {\n    const animator = createComponentAnimator(this.target);\n    this._animator = animator;\n    const duration = this.duration;\n    const easing = this.easing;\n    const { diffAttrs } = this.params;\n    // this.target.applyAnimationState(\n    //   ['update'],\n    //   [\n    //     {\n    //       name: 'update',\n    //       animation: {\n    //         type: 'to',\n    //         to: { ...this.props },\n    //         duration,\n    //         easing,\n    //         customParameters: {\n    //           diffAttrs: { ...this.props }\n    //         }\n    //       }\n    //     }\n    //   ]\n    // );\n    // console.log('this.props', this.props, { ...this.target.attribute });\n    commitUpdateAnimationTarget(this.target, { ...diffAttrs });\n    animator.animate(this.target, {\n      type: 'to',\n      to: { ...diffAttrs },\n      duration,\n      easing,\n      customParameters: {\n        diffAttrs: { ...diffAttrs }\n      }\n    });\n    this.completeBind(animator);\n  }\n\n  // 轴动画本身没有逻辑，具体通过animator中执行，所以当需要屏蔽自身属性时，需要通过animator中执行\n  deleteSelfAttr(key: string): void {\n    super.deleteSelfAttr(key);\n    this._animator.deleteSelfAttr(key);\n  }\n\n  // 轴动画本身没有逻辑，具体通过animator中执行，所以本身不需要屏蔽冲突\n  protected tryPreventConflict(): void {\n    return;\n  }\n}\n\nexport function registerAxisAnimate() {\n  // Label update animation\n  AnimateExecutor.registerBuiltInAnimate('axisEnter', AxisEnter);\n  AnimateExecutor.registerBuiltInAnimate('axisUpdate', AxisUpdate);\n}\n"]}

package/es/animation/static-truth.d.ts

@@ -0,0 +1,2 @@
+import { type IGraphic } from '@visactor/vrender-core';
+export declare function commitUpdateAnimationTarget(graphic?: IGraphic, targetAttrs?: Record<string, any>, startAttrs?: Record<string, any>): void;

package/es/animation/static-truth.js

@@ -0,0 +1,18 @@
+import { AttributeUpdateType } from "@visactor/vrender-core";
+
+import { cloneDeep } from "@visactor/vutils";
+
+export function commitUpdateAnimationTarget(graphic, targetAttrs, startAttrs) {
+    var _a, _b, _c, _d;
+    if (!graphic || !targetAttrs) return;
+    const committedTargetAttrs = cloneDeep(targetAttrs), transientStartAttrs = cloneDeep(null != startAttrs ? startAttrs : graphic.attribute);
+    graphic.setAttributes(committedTargetAttrs);
+    const baseAttributes = graphic.baseAttributes;
+    baseAttributes && "object" == typeof baseAttributes && Object.keys(committedTargetAttrs).forEach((key => {
+        baseAttributes[key] = cloneDeep(committedTargetAttrs[key]);
+    })), null === (_b = (_a = graphic).setFinalAttributes) || void 0 === _b || _b.call(_a, committedTargetAttrs), 
+    null === (_d = (_c = graphic).setAttributesAndPreventAnimate) || void 0 === _d || _d.call(_c, transientStartAttrs, !1, {
+        type: AttributeUpdateType.ANIMATE_BIND
+    });
+}
+//# sourceMappingURL=static-truth.js.map

package/es/animation/static-truth.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/animation/static-truth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAiB,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,MAAM,UAAU,2BAA2B,CACzC,OAAkB,EAClB,WAAiC,EACjC,UAAgC;;IAEhC,IAAI,CAAC,OAAO,IAAI,CAAC,WAAW,EAAE;QAC5B,OAAO;KACR;IAED,MAAM,oBAAoB,GAAG,SAAS,CAAC,WAAW,CAAC,CAAC;IACpD,MAAM,mBAAmB,GAAG,SAAS,CAAC,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,OAAO,CAAC,SAAS,CAAC,CAAC;IAEvE,OAAO,CAAC,aAAa,CAAC,oBAA2B,CAAC,CAAC;IACnD,MAAM,cAAc,GAAI,OAAe,CAAC,cAAc,CAAC;IACvD,IAAI,cAAc,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;QACxD,MAAM,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC9C,cAAc,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,CAAC;QAC7D,CAAC,CAAC,CAAC;KACJ;IACD,MAAA,MAAC,OAAe,EAAC,kBAAkB,mDAAG,oBAAoB,CAAC,CAAC;IAC5D,MAAA,MAAC,OAAe,EAAC,8BAA8B,mDAAG,mBAA0B,EAAE,KAAK,EAAE;QACnF,IAAI,EAAE,mBAAmB,CAAC,YAAY;KACvC,CAAC,CAAC;AACL,CAAC","file":"static-truth.js","sourcesContent":["import { AttributeUpdateType, type IGraphic } from '@visactor/vrender-core';\nimport { cloneDeep } from '@visactor/vutils';\n\nexport function commitUpdateAnimationTarget(\n  graphic?: IGraphic,\n  targetAttrs?: Record<string, any>,\n  startAttrs?: Record<string, any>\n) {\n  if (!graphic || !targetAttrs) {\n    return;\n  }\n\n  const committedTargetAttrs = cloneDeep(targetAttrs);\n  const transientStartAttrs = cloneDeep(startAttrs ?? graphic.attribute);\n\n  graphic.setAttributes(committedTargetAttrs as any);\n  const baseAttributes = (graphic as any).baseAttributes;\n  if (baseAttributes && typeof baseAttributes === 'object') {\n    Object.keys(committedTargetAttrs).forEach(key => {\n      baseAttributes[key] = cloneDeep(committedTargetAttrs[key]);\n    });\n  }\n  (graphic as any).setFinalAttributes?.(committedTargetAttrs);\n  (graphic as any).setAttributesAndPreventAnimate?.(transientStartAttrs as any, false, {\n    type: AttributeUpdateType.ANIMATE_BIND\n  });\n}\n"]}

package/es/axis/animate/group-transition.d.ts

@@ -1,9 +1,9 @@
-import { AnimateMode } from '@visactor/vrender-core';
-import type { IGroup } from '@visactor/vrender-core';
+import { AnimateMode, type IGroup } from '@visactor/vrender-core';
 import { ACustomAnimate } from '@visactor/vrender-animate';
 export declare class GroupTransition extends ACustomAnimate<any> {
     target: IGroup;
     private _newElementAttrMap;
+    private _started;
     mode: AnimateMode;
     onBind(): void;
     onStart(): void;

package/es/axis/animate/group-transition.js

@@ -6,11 +6,14 @@ import { cloneDeep, interpolateString, isEqual, isValidNumber } from "@visactor/
 
 import { traverseGroup } from "../../util";
 
+import { commitUpdateAnimationTarget } from "../../animation/static-truth";
+
 export class GroupTransition extends ACustomAnimate {
     constructor() {
         super(...arguments), this.mode = AnimateMode.NORMAL;
     }
     onBind() {
+        this._started = !1;
         const currentInnerView = this.target.getInnerView(), prevInnerView = this.target.getPrevInnerView();
         prevInnerView && (this._newElementAttrMap = {}, traverseGroup(currentInnerView, (el => {
             var _a, _b, _c, _d, _e, _f;
@@ -27,7 +30,7 @@ export class GroupTransition extends ACustomAnimate {
                                 fillOpacity: null !== (_b = newProps.fillOpacity) && void 0 !== _b ? _b : 1,
                                 strokeOpacity: null !== (_c = newProps.strokeOpacity) && void 0 !== _c ? _c : 1
                             })
-                        }, el.setAttributes(oldEl.attribute);
+                        }, commitUpdateAnimationTarget(el, this._newElementAttrMap[el.id].attrs, cloneDeep(oldEl.attribute));
                     }
                 } else {
                     const finalOpacityAttrs = {
@@ -39,7 +42,7 @@ export class GroupTransition extends ACustomAnimate {
                         state: "enter",
                         node: el,
                         attrs: finalOpacityAttrs
-                    }, el.setAttributes({
+                    }, commitUpdateAnimationTarget(el, finalOpacityAttrs, {
                         opacity: 0,
                         fillOpacity: 0,
                         strokeOpacity: 0
@@ -49,6 +52,8 @@ export class GroupTransition extends ACustomAnimate {
         })));
     }
     onStart() {
+        if (this._started) return;
+        this._started = !0;
         let duration = this.duration, easing = this.easing;
         this._newElementAttrMap && Object.keys(this._newElementAttrMap).forEach((id => {
             var _a;