@visactor/vrender 1.1.0-alpha.1 → 1.1.0-alpha.10

package/dist/index.js

@@ -8651,11 +8651,23 @@
         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;
       }
@@ -8682,12 +8694,14 @@
         }), 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);
       }
@@ -8987,11 +9001,13 @@
             stateProxyModeKey: this.stateProxy ? "legacy-all" : "none"
           };
         }
-        const sharedCompiledDefinitions = boundScope.effectiveCompiledDefinitions;
+        const sharedCompiledDefinitions = boundScope.effectiveCompiledDefinitions,
+          sharedStateProxyModeKey = this.stateProxy ? "shared-missing-only" : "none",
+          sharedStateProxyEligibility = this.stateProxy ? stateName => !sharedCompiledDefinitions.has(stateName) : void 0;
         if (!hasStates) return this.localFallbackCompiledDefinitions = void 0, {
           compiledDefinitions: sharedCompiledDefinitions,
-          stateProxyModeKey: this.stateProxy ? "shared-disabled" : "none",
-          stateProxyEligibility: this.stateProxy ? () => !1 : void 0
+          stateProxyModeKey: sharedStateProxyModeKey,
+          stateProxyEligibility: sharedStateProxyEligibility
         };
         const localStates = this.states,
           missingLocalStateDefinitions = {},
@@ -9000,8 +9016,8 @@
           sharedCompiledDefinitions.has(stateName) || (missingLocalStateDefinitions[stateName] = localStates[stateName], missingStateNames.push(stateName));
         }), !missingStateNames.length) return this.localFallbackCompiledDefinitions = void 0, {
           compiledDefinitions: sharedCompiledDefinitions,
-          stateProxyModeKey: this.stateProxy ? "shared-disabled" : "none",
-          stateProxyEligibility: this.stateProxy ? () => !1 : void 0
+          stateProxyModeKey: sharedStateProxyModeKey,
+          stateProxyEligibility: sharedStateProxyEligibility
         };
         const localStatesVersion = this.getLocalStatesVersion(),
           stateProxyModeKey = this.stateProxy ? `missing:${missingStateNames.sort().join("|")}` : "none",
@@ -9009,7 +9025,7 @@
         return this.localFallbackCompiledDefinitions && this.compiledStateDefinitionsCacheKey === cacheKey || (this.localFallbackCompiledDefinitions = new StateDefinitionCompiler().compile(Object.assign(Object.assign({}, boundScope.effectiveSourceDefinitions), missingLocalStateDefinitions)), this.compiledStateDefinitionsCacheKey = cacheKey), {
           compiledDefinitions: this.localFallbackCompiledDefinitions,
           stateProxyModeKey: stateProxyModeKey,
-          stateProxyEligibility: this.stateProxy ? stateName => !sharedCompiledDefinitions.has(stateName) : void 0
+          stateProxyEligibility: sharedStateProxyEligibility
         };
       }
       recomputeCurrentStatePatch() {
@@ -9033,6 +9049,23 @@
           "deep" === this.stateMergeMode && isPlainObjectValue(previousValue) && isPlainObjectValue(nextValue) ? snapshot[key] = deepMergeAttributeValue(previousValue, nextValue) : snapshot[key] = cloneAttributeValue(nextValue);
         }), snapshot) : snapshot;
       }
+      buildRemovedStateAnimationAttrs(targetStateAttrs, previousResolvedStatePatch) {
+        const extraAttrs = {};
+        if (!previousResolvedStatePatch) return extraAttrs;
+        const snapshot = this.buildStaticAttributeSnapshot(),
+          staticTargetAttrs = snapshot;
+        return Object.keys(previousResolvedStatePatch).forEach(key => {
+          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();
         return new Set([...Object.keys(target), ...Object.keys(snapshot)]).forEach(key => {
@@ -9454,21 +9487,31 @@
         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);
@@ -9485,13 +9528,14 @@
       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: exports.AttributeUpdateType.STATE
         }), this._emitCustomEvent("afterStateUpdate", {
           type: exports.AttributeUpdateType.STATE
@@ -9513,6 +9557,7 @@
         var _a, _b, _c, _d, _e;
         if (!states.length) return void this.clearStates(hasAnimation);
         const previousStates = this.currentStates ? this.currentStates.slice() : [],
+          previousResolvedStatePatch = this.resolvedStatePatch ? cloneAttributeValue(this.resolvedStatePatch) : void 0,
           stateResolveBaseAttrs = null !== (_a = this.baseAttributes) && void 0 !== _a ? _a : this.attribute,
           stateModel = this.createStateModel();
         null === (_b = this.stateEngine) || void 0 === _b || _b.setResolveContext(this, stateResolveBaseAttrs);
@@ -9523,7 +9568,7 @@
         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(resolvedStateAttrs, 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: exports.AttributeUpdateType.STATE
         }), this._emitCustomEvent("afterStateUpdate", {
           type: exports.AttributeUpdateType.STATE
@@ -10955,6 +11000,52 @@
       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;
@@ -32341,6 +32432,19 @@
       return !1;
     }
 
+    function applyAnimationTransientAttributes(target, attributes, type = exports.AttributeUpdateType.ANIMATE_UPDATE) {
+      var _a;
+      if (!attributes) return;
+      const context = {
+          type: type
+        },
+        transientTarget = target;
+      "function" != typeof transientTarget.applyTransientAttributes ? "function" != typeof transientTarget.setAttributesAndPreventAnimate ? (transientTarget.attribute || (transientTarget.attribute = {}), Object.assign(transientTarget.attribute, attributes), null === (_a = transientTarget.onAttributeUpdate) || void 0 === _a || _a.call(transientTarget, context)) : transientTarget.setAttributesAndPreventAnimate(attributes, !1, context) : transientTarget.applyTransientAttributes(attributes, !1, context);
+    }
+    function applyAppearStartAttributes(target, attributes) {
+      applyAnimationTransientAttributes(target, attributes, exports.AttributeUpdateType.ANIMATE_BIND);
+    }
+
     function noop() {}
     class Step {
       constructor(type, props, duration, easing) {
@@ -32466,7 +32570,7 @@
       onStart() {
         super.onStart();
         const fromProps = this.getFromProps();
-        this.target.setAttributes(fromProps);
+        applyAnimationTransientAttributes(this.target, fromProps, exports.AttributeUpdateType.ANIMATE_START);
       }
       update(end, ratio, out) {
         this.onStart();
@@ -32681,7 +32785,7 @@
         this.target = target;
         const trackerTarget = this.target;
         return "function" == typeof trackerTarget.trackAnimate ? trackerTarget.trackAnimate(this) : (this.target.animates || (this.target.animates = new Map()), this.target.animates.set(this.id, this)), this.onRemove(() => {
-          this.stop(), "function" == typeof trackerTarget.restoreStaticAttribute && trackerTarget.restoreStaticAttribute(), "function" == typeof trackerTarget.untrackAnimate ? trackerTarget.untrackAnimate(this.id) : this.target.animates.delete(this.id);
+          this.stop(), this.__skipRestoreStaticAttributeOnRemove || "function" != typeof trackerTarget.restoreStaticAttribute || trackerTarget.restoreStaticAttribute(), "function" == typeof trackerTarget.untrackAnimate ? trackerTarget.untrackAnimate(this.id) : this.target.animates.delete(this.id);
         }), this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
       }
       to(props, duration = 300, easing = "linear") {
@@ -32817,7 +32921,7 @@
         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 = exports.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 = exports.AnimateStatus.RUNNING, this.currentTime <= this._startTime && this.onStart(), this.currentTime = nextTime;
         let cycleTime = nextTime - this._startTime,
@@ -32828,7 +32932,7 @@
           const currentLoop = Math.floor((nextTime - this._startTime) / this._duration);
           newLoop = currentLoop > this._currentLoop, this._currentLoop = currentLoop, bounceTime = this._bounce && currentLoop % 2 == 1, bounceTime && (cycleTime = this._duration - cycleTime);
         }
-        newLoop && !bounceTime && this.target.setAttributes(this._startProps);
+        newLoop && !bounceTime && applyAnimationTransientAttributes(this.target, this._startProps, exports.AttributeUpdateType.ANIMATE_START);
         let targetStep = null;
         if (this._lastStep === this._firstStep) targetStep = this._firstStep;else {
           let currentStep = this._firstStep;
@@ -33115,6 +33219,9 @@
         })), this.registerTransition("state", "*", () => ({
           allowTransition: !0,
           stopOriginalTransition: !1
+        })), this.registerTransition("state", "state", () => ({
+          allowTransition: !0,
+          stopOriginalTransition: !0
         })), this.registerTransition("state", "disappear", () => ({
           allowTransition: !0,
           stopOriginalTransition: !0
@@ -33394,7 +33501,8 @@
           void 0 !== config.to && ("function" == typeof config.to ? props[key] = config.to(null === (_b = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.data) || void 0 === _b ? void 0 : _b[0], graphic, {}) : props[key] = config.to), void 0 !== config.from && (from || (from = {}), "function" == typeof config.from ? from[key] = config.from(null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, {}) : from[key] = config.from);
         }), diffAttrs) for (const key in diffAttrs) {
           const value = diffAttrs[key];
-          void 0 !== value && (props.hasOwnProperty(key) || (attrOutChannel[key] = value, hasAttrs = !0));
+          if (void 0 === value) continue;
+          props.hasOwnProperty(key) || !!(null == from ? void 0 : from.hasOwnProperty(key)) || (attrOutChannel[key] = value, hasAttrs = !0);
         }
         return {
           from: from,
@@ -33419,7 +33527,7 @@
       stop(type, callEnd = !0) {
         for (; this._animates.length > 0;) {
           const animate = this._animates.pop();
-          !1 === callEnd && (animate.status = exports.AnimateStatus.END), null == animate || animate.stop(type);
+          !1 === callEnd && (animate.status = exports.AnimateStatus.END, animate.__skipRestoreStaticAttributeOnRemove = !0), null == animate || animate.stop(type);
         }
         this._animates = [], this._activeCount = 0, this._started && (this._started = !1, callEnd && this.onEnd());
       }
@@ -33852,7 +33960,9 @@
           const parts = formattedNumber.toString().split(".");
           parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","), formattedWithBasicFormat = parts.join(".");
         } else formattedWithBasicFormat = formattedNumber;
-        formattedText = this.formatTemplate ? this.formatTemplate.replace("{{var}}", formattedWithBasicFormat.toString()) : formattedWithBasicFormat, this.target.setAttribute("text", formattedText);
+        formattedText = this.formatTemplate ? this.formatTemplate.replace("{{var}}", formattedWithBasicFormat.toString()) : formattedWithBasicFormat, applyAnimationTransientAttributes(this.target, {
+          text: formattedText
+        });
       }
     }
 
@@ -33959,7 +34069,7 @@
       onUpdate(end, ratio, out) {
         const target = this.target,
           pathProxy = "function" == typeof target.pathProxy ? target.pathProxy(target.attribute) : target.pathProxy;
-        interpolateMorphingData(this.morphingData, pathProxy, ratio), this.otherAttrs && this.otherAttrs.length && interpolateOtherAttrs(this.otherAttrs, out, ratio), this.target.setAttributes(out), end && !this.saveOnEnd && (this.target.pathProxy = null);
+        interpolateMorphingData(this.morphingData, pathProxy, ratio), this.otherAttrs && this.otherAttrs.length && interpolateOtherAttrs(this.otherAttrs, out, ratio), end && this.saveOnEnd ? this.target.setAttributes(out) : applyAnimationTransientAttributes(this.target, out), end && !this.saveOnEnd && (this.target.pathProxy = null);
       }
     }
     const morphPath = (fromGraphic, toGraphic, animationConfig, fromGraphicTransform) => {
@@ -34190,7 +34300,9 @@
           const blinkRate = .1;
           Math.floor(ratio / blinkRate) % 2 == 0 && (displayText = this.beforeText + currentText + this.cursorChar + this.afterText);
         } else displayText = this.beforeText + currentText + this.cursorChar + this.afterText;
-        this.target.setAttribute("text", displayText);
+        applyAnimationTransientAttributes(this.target, {
+          text: displayText
+        });
       }
     }
 
@@ -34199,11 +34311,9 @@
         super(null, {}, duration, easing, params), this.clipFromAttribute = from, this.clipToAttribute = to, this._group = null == params ? void 0 : params.group, this._clipGraphic = null == params ? void 0 : params.clipGraphic;
       }
       onBind() {
-        super.onBind(), this._group && this._clipGraphic && (this._lastClip = this._group.attribute.clip, this._lastPath = this._group.attribute.path, this._group.setAttributes({
+        super.onBind(), this._group && this._clipGraphic && (this._lastClip = this._group.attribute.clip, this._lastPath = this._group.attribute.path, applyAppearStartAttributes(this._group, {
           clip: !0,
           path: [this._clipGraphic]
-        }, !1, {
-          type: exports.AttributeUpdateType.ANIMATE_BIND
         }));
       }
       onEnd() {
@@ -34416,7 +34526,7 @@
           return newPoint.context = point.context, newPoint;
         }), this.clipRange) {
           if (this.shrinkClipRange) return void (end ? (out.points = this.toPoints, out.clipRange = 1) : (out.points = this.fromPoints, out.clipRange = this.clipRange - (this.clipRange - this.shrinkClipRange) * ratio));
-          this.target.setAttributes({
+          applyAnimationTransientAttributes(this.target, {
             clipRange: this.clipRange + (1 - this.clipRange) * ratio
           });
         }
@@ -34449,7 +34559,7 @@
         this.keys.forEach(key => {
           var _a, _b, _c;
           to[key] = null !== (_a = null == attrs ? void 0 : attrs[key]) && void 0 !== _a ? _a : 1, from[key] = null !== (_c = null !== (_b = from[key]) && void 0 !== _b ? _b : fromAttrs[key]) && void 0 !== _c ? _c : 0;
-        }), null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), this.props = to, this.propKeys = this.keys, this.from = from, this.to = to, !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && this.target.setAttributes(from);
+        }), null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), this.props = to, this.propKeys = this.keys, this.from = from, this.to = to, !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, from);
       }
       onUpdate(end, ratio, out) {
         const attribute = this.target.attribute;
@@ -34703,7 +34813,7 @@
             to: to
           } = growAngleIn(this.target, this.params.options, this.params),
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
-        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && this.target.setAttributes(fromAttrs), this.determineUpdateFunction();
+        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs), this.determineUpdateFunction();
       }
     }
     class GrowAngleOut extends GrowAngleBase {
@@ -34853,7 +34963,7 @@
             to: to
           } = growCenterIn(this.target, this.params.options, this.params),
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
-        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && this.target.setAttributes(fromAttrs);
+        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -34958,7 +35068,7 @@
             to: to
           } = growHeightIn(this.target, this.params.options, this.params),
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
-        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && this.target.setAttributes(fromAttrs);
+        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -35072,7 +35182,7 @@
             from: from,
             to: to
           } = growPointsIn(this.target, this.params.options, this.params);
-          this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(from);
+          this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, from);
         } else this.valid = !1;
       }
     }
@@ -35134,7 +35244,7 @@
             from: from,
             to: to
           } = growPointsXIn(this.target, this.params.options, this.params);
-          this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(from);
+          this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, from);
         } else this.valid = !1;
       }
     }
@@ -35196,7 +35306,7 @@
             from: from,
             to: to
           } = growPointsYIn(this.target, this.params.options, this.params);
-          this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(from);
+          this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, from);
         } else this.valid = !1;
       }
     }
@@ -35308,7 +35418,7 @@
             to: to
           } = growRadiusIn(this.target, this.params.options, this.params),
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
-        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && this.target.setAttributes(fromAttrs);
+        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs);
       }
     }
     class GrowRadiusOut extends GrowPointsBase {
@@ -35430,7 +35540,7 @@
             to: to
           } = growWidthIn(this.target, this.params.options, this.params),
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
-        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && this.target.setAttributes(fromAttrs);
+        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to, null === (_d = (_c = this.target).applyFinalAttributeToAttribute) || void 0 === _d || _d.call(_c), !1 !== (null === (_e = this.params.controlOptions) || void 0 === _e ? void 0 : _e.immediatelyApply) && applyAppearStartAttributes(this.target, fromAttrs);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -35481,7 +35591,7 @@
           } = this.params,
           symbolTime = duration / 10;
         let symbolStartOuterFrom, symbolStartOuterTo;
-        if (target._symbolStart.setAttributes({
+        if (applyAppearStartAttributes(target._symbolStart, {
           scaleX: 0,
           scaleY: 0
         }), animator.animate(target._symbolStart, {
@@ -35502,12 +35612,12 @@
           clipRange: 0
         }, symbolStartOuterTo = {
           clipRange: 1
-        }), target._symbolStartOuter.setAttributes(symbolStartOuterFrom), animator.animate(target._symbolStartOuter, {
+        }), applyAppearStartAttributes(target._symbolStartOuter, symbolStartOuterFrom), animator.animate(target._symbolStartOuter, {
           type: "to",
           to: symbolStartOuterTo,
           duration: 5 * symbolTime,
           easing: easing
-        }), target._symbolEnd.setAttributes({
+        }), applyAppearStartAttributes(target._symbolEnd, {
           scaleX: 0,
           scaleY: 0
         }), animator.animate(target._symbolEnd, {
@@ -35519,7 +35629,7 @@
           duration: 2 * symbolTime,
           delay: 8 * symbolTime,
           easing: easing
-        }), target._line.setAttributes({
+        }), applyAppearStartAttributes(target._line, {
           clipRange: 0
         }), animator.animate(target._line, {
           type: "to",
@@ -35530,7 +35640,7 @@
           easing: easing
         }), "typewriter" === titleType) {
           const titleTopText = target._titleTop.attribute.text;
-          target._titleTop.setAttributes({
+          applyAppearStartAttributes(target._titleTop, {
             text: ""
           }), animator.animate(target._titleTop, {
             type: "custom",
@@ -35543,7 +35653,7 @@
             custom: InputText
           });
           const titleBottomText = target._titleBottom.attribute.text;
-          target._titleBottom.setAttributes({
+          applyAppearStartAttributes(target._titleBottom, {
             text: ""
           }), animator.animate(target._titleBottom, {
             type: "custom",
@@ -35555,7 +35665,7 @@
             },
             custom: InputText
           });
-        } else target._titleTop.setAttributes({
+        } else applyAppearStartAttributes(target._titleTop, {
           dy: target._titleTop.AABBBounds.height() + 10
         }), animator.animate(target._titleTop, {
           type: "to",
@@ -35565,7 +35675,7 @@
           delay: 5 * symbolTime,
           duration: 4 * symbolTime,
           easing: "linear"
-        }), target._titleBottom.setAttributes({
+        }), applyAppearStartAttributes(target._titleBottom, {
           dy: -(10 + target._titleBottom.AABBBounds.height())
         }), animator.animate(target._titleBottom, {
           type: "to",
@@ -35579,7 +35689,7 @@
         "scale" === titlePanelType ? [target._titleTopPanel, target._titleBottomPanel].forEach(panel => {
           var _a;
           const scaleX = null !== (_a = panel.attribute.scaleX) && void 0 !== _a ? _a : 1;
-          panel.setAttributes({
+          applyAppearStartAttributes(panel, {
             scaleX: 0
           }), animator.animate(panel, {
             type: "to",
@@ -35592,7 +35702,7 @@
         }) : "stroke" === titlePanelType && [target._titleTopPanel, target._titleBottomPanel].forEach(panel => {
           const b = panel.AABBBounds,
             totalLen = 2 * (b.width() + b.height());
-          panel.setAttributes({
+          applyAppearStartAttributes(panel, {
             lineDash: [0, 10 * totalLen]
           }), animator.animate(panel, {
             type: "to",
@@ -35699,7 +35809,7 @@
           {
             wave: wave
           } = this.params;
-        if (target.setAttributes({
+        if (applyAppearStartAttributes(target, {
           scaleX: 0,
           scaleY: 0
         }), animator.animate(target, {
@@ -35852,7 +35962,9 @@
             }
           }
         }
-        this.target.setAttribute("textConfig", currentTextConfig);
+        applyAnimationTransientAttributes(this.target, {
+          textConfig: currentTextConfig
+        });
       }
     }
 
@@ -35879,18 +35991,21 @@
             displayedLength = Math.round(fromItems * (1 - adjustedRatio));
           } else displayedLength = Math.round(fromItems * (1 - ratio));
           let currentTextConfig = "forward" === this.direction ? this.fromTextConfig.slice(fromItems - displayedLength) : this.fromTextConfig.slice(0, displayedLength);
-          this.fadeOutChars && (currentTextConfig = this.applyFadeEffect(currentTextConfig, ratio, fromItems, displayedLength)), this.showCursor && displayedLength > 0 && (currentTextConfig = this.addCursor(currentTextConfig, ratio)), this.target.setAttribute("textConfig", currentTextConfig);
+          this.fadeOutChars && (currentTextConfig = this.applyFadeEffect(currentTextConfig, ratio, fromItems, displayedLength)), this.showCursor && displayedLength > 0 && (currentTextConfig = this.addCursor(currentTextConfig, ratio)), applyAnimationTransientAttributes(this.target, {
+            textConfig: currentTextConfig
+          });
         } else {
           if (this.fadeOutChars) {
             const adjustedRatio = Math.min(1, ratio / maxTextHideRatio);
             displayedLength = Math.round(fromItems * (1 - adjustedRatio));
           } else displayedLength = Math.round(fromItems * (1 - ratio));
           let currentTextConfig = this.fromTextConfig.slice(0, displayedLength);
-          this.fadeOutChars && (currentTextConfig = this.applyFadeEffect(currentTextConfig, ratio, fromItems, displayedLength)), this.showCursor && displayedLength > 0 && (currentTextConfig = this.addCursor(currentTextConfig, ratio)), this.target.setAttribute("textConfig", currentTextConfig);
+          this.fadeOutChars && (currentTextConfig = this.applyFadeEffect(currentTextConfig, ratio, fromItems, displayedLength)), this.showCursor && displayedLength > 0 && (currentTextConfig = this.addCursor(currentTextConfig, ratio)), applyAnimationTransientAttributes(this.target, {
+            textConfig: currentTextConfig
+          });
         }
       }
       applyFadeEffect(textConfig, ratio, totalItems, displayedLength) {
-        "forward" === this.direction ? totalItems - displayedLength : displayedLength;
         const fadeProgress = (ratio - (1 - this.fadeOutDuration)) / this.fadeOutDuration,
           fadeOpacity = Math.max(0, 1 - Math.min(1, fadeProgress));
         return textConfig.map((item, index) => {
@@ -35992,7 +36107,9 @@
         if (!this.valid) return;
         const maxTextShowRatio = 1 - this.fadeInDuration;
         let updatedTextConfig;
-        updatedTextConfig = this.wordByWord && this.wordGroups.length > 0 ? this.updateByWord(ratio, maxTextShowRatio) : this.updateByCharacter(ratio, maxTextShowRatio), this.target.setAttribute("textConfig", updatedTextConfig);
+        updatedTextConfig = this.wordByWord && this.wordGroups.length > 0 ? this.updateByWord(ratio, maxTextShowRatio) : this.updateByCharacter(ratio, maxTextShowRatio), applyAnimationTransientAttributes(this.target, {
+          textConfig: updatedTextConfig
+        });
       }
       updateByWord(ratio, maxTextShowRatio) {
         const totalGroups = this.wordGroups.length,
@@ -36121,7 +36238,9 @@
         if (!this.valid) return;
         const maxTextShowRatio = 1 - this.fadeOutDuration;
         let updatedTextConfig;
-        updatedTextConfig = this.wordByWord && this.wordGroups.length > 0 ? this.updateByWord(ratio, maxTextShowRatio) : this.updateByCharacter(ratio, maxTextShowRatio), this.target.setAttribute("textConfig", updatedTextConfig);
+        updatedTextConfig = this.wordByWord && this.wordGroups.length > 0 ? this.updateByWord(ratio, maxTextShowRatio) : this.updateByCharacter(ratio, maxTextShowRatio), applyAnimationTransientAttributes(this.target, {
+          textConfig: updatedTextConfig
+        });
       }
       updateByWord(ratio, maxTextShowRatio) {
         const totalGroups = this.wordGroups.length,
@@ -36220,7 +36339,7 @@
               scaleY: null !== (_k = null == attrs ? void 0 : attrs.scaleY) && void 0 !== _k ? _k : 1
             }, this._updateFunction = this.updateXY;
         }
-        null === (_m = (_l = this.target).applyFinalAttributeToAttribute) || void 0 === _m || _m.call(_l), this.props = to, this.from = from, this.to = to, !1 !== (null === (_o = this.params.controlOptions) || void 0 === _o ? void 0 : _o.immediatelyApply) && this.target.setAttributes(from);
+        null === (_m = (_l = this.target).applyFinalAttributeToAttribute) || void 0 === _m || _m.call(_l), this.props = to, this.from = from, this.to = to, !1 !== (null === (_o = this.params.controlOptions) || void 0 === _o ? void 0 : _o.immediatelyApply) && applyAppearStartAttributes(this.target, from);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -36323,7 +36442,7 @@
             opacity: 1,
             baseOpacity: 1
           };
-        "top" === direction ? (from.y = (null !== (_e = attrs.y) && void 0 !== _e ? _e : 0) - distance, to.y = null !== (_f = attrs.y) && void 0 !== _f ? _f : 0, this.propKeys = ["opacity", "baseOpacity", "y"]) : "bottom" === direction ? (from.y = (null !== (_g = attrs.y) && void 0 !== _g ? _g : 0) + distance, to.y = null !== (_h = attrs.y) && void 0 !== _h ? _h : 0, this.propKeys = ["opacity", "baseOpacity", "y"]) : "left" === direction ? (from.x = (null !== (_j = attrs.x) && void 0 !== _j ? _j : 0) - distance, to.x = null !== (_k = attrs.x) && void 0 !== _k ? _k : 0, this.propKeys = ["opacity", "baseOpacity", "x"]) : (from.x = (null !== (_l = attrs.x) && void 0 !== _l ? _l : 0) + distance, to.x = null !== (_m = attrs.x) && void 0 !== _m ? _m : 0, this.propKeys = ["opacity", "baseOpacity", "x"]), this.from = from, this.to = to, this.props = to, this.target.setAttributes(from);
+        "top" === direction ? (from.y = (null !== (_e = attrs.y) && void 0 !== _e ? _e : 0) - distance, to.y = null !== (_f = attrs.y) && void 0 !== _f ? _f : 0, this.propKeys = ["opacity", "baseOpacity", "y"]) : "bottom" === direction ? (from.y = (null !== (_g = attrs.y) && void 0 !== _g ? _g : 0) + distance, to.y = null !== (_h = attrs.y) && void 0 !== _h ? _h : 0, this.propKeys = ["opacity", "baseOpacity", "y"]) : "left" === direction ? (from.x = (null !== (_j = attrs.x) && void 0 !== _j ? _j : 0) - distance, to.x = null !== (_k = attrs.x) && void 0 !== _k ? _k : 0, this.propKeys = ["opacity", "baseOpacity", "x"]) : (from.x = (null !== (_l = attrs.x) && void 0 !== _l ? _l : 0) + distance, to.x = null !== (_m = attrs.x) && void 0 !== _m ? _m : 0, this.propKeys = ["opacity", "baseOpacity", "x"]), this.from = from, this.to = to, this.props = to, applyAppearStartAttributes(this.target, from);
       }
       onUpdate(end, ratio, out) {
         const attribute = this.target.attribute;
@@ -36351,7 +36470,7 @@
             opacity: 1,
             baseOpacity: 1
           };
-        this.propKeys = ["opacity", "baseOpacity"], "x" !== direction && "xy" !== direction || (from.scaleX = fromScale, to.scaleX = null !== (_f = attrs.scaleX) && void 0 !== _f ? _f : 1, this.propKeys.push("scaleX")), "y" !== direction && "xy" !== direction || (from.scaleY = fromScale, to.scaleY = null !== (_g = attrs.scaleY) && void 0 !== _g ? _g : 1, this.propKeys.push("scaleY")), this.from = from, this.to = to, this.props = to, this.target.setAttributes(from);
+        this.propKeys = ["opacity", "baseOpacity"], "x" !== direction && "xy" !== direction || (from.scaleX = fromScale, to.scaleX = null !== (_f = attrs.scaleX) && void 0 !== _f ? _f : 1, this.propKeys.push("scaleX")), "y" !== direction && "xy" !== direction || (from.scaleY = fromScale, to.scaleY = null !== (_g = attrs.scaleY) && void 0 !== _g ? _g : 1, this.propKeys.push("scaleY")), this.from = from, this.to = to, this.props = to, applyAppearStartAttributes(this.target, from);
       }
       onUpdate(end, ratio, out) {
         const attribute = this.target.attribute;
@@ -36385,7 +36504,7 @@
             scaleX: null !== (_h = attrs.scaleX) && void 0 !== _h ? _h : 1,
             scaleY: null !== (_j = attrs.scaleY) && void 0 !== _j ? _j : 1
           };
-        this.propKeys = ["opacity", "baseOpacity", "angle", "scaleX", "scaleY"], this.from = from, this.to = to, this.props = to, this.target.setAttributes(from);
+        this.propKeys = ["opacity", "baseOpacity", "angle", "scaleX", "scaleY"], this.from = from, this.to = to, this.props = to, applyAppearStartAttributes(this.target, from);
       }
       onUpdate(end, ratio, out) {
         const attribute = this.target.attribute;
@@ -36432,7 +36551,7 @@
           lineWidth: lineWidth,
           stroke: strokeColor,
           strokeOpacity: fromOpacity
-        }, showFill ? (this.from.fillOpacity = fillOpacity, this.to.fillOpacity = null !== (_t = this.originalAttributes.fillOpacity) && void 0 !== _t ? _t : 1) : (this.from.fillOpacity = 0, this.to.fillOpacity = 0), this.propKeys = ["lineDash", "lineDashOffset", "lineWidth", "stroke", "strokeOpacity", "fillOpacity"], this.props = this.to, this.target.setAttributes(this.from);
+        }, showFill ? (this.from.fillOpacity = fillOpacity, this.to.fillOpacity = null !== (_t = this.originalAttributes.fillOpacity) && void 0 !== _t ? _t : 1) : (this.from.fillOpacity = 0, this.to.fillOpacity = 0), this.propKeys = ["lineDash", "lineDashOffset", "lineWidth", "stroke", "strokeOpacity", "fillOpacity"], this.props = this.to, applyAppearStartAttributes(this.target, this.from);
       }
       onUpdate(end, ratio, out) {
         var _a;
@@ -36484,7 +36603,7 @@
           lineWidth: lineWidth,
           stroke: strokeColor,
           strokeOpacity: fromOpacity
-        }, showFill ? (this.from.fillOpacity = null !== (_r = this.originalAttributes.fillOpacity) && void 0 !== _r ? _r : 1, this.to.fillOpacity = 0) : (this.from.fillOpacity = 0, this.to.fillOpacity = 0), this.propKeys = ["lineDash", "lineDashOffset", "lineWidth", "stroke", "strokeOpacity", "fillOpacity"], this.props = this.to, this.target.setAttributes(this.from);
+        }, showFill ? (this.from.fillOpacity = null !== (_r = this.originalAttributes.fillOpacity) && void 0 !== _r ? _r : 1, this.to.fillOpacity = 0) : (this.from.fillOpacity = 0, this.to.fillOpacity = 0), this.propKeys = ["lineDash", "lineDashOffset", "lineWidth", "stroke", "strokeOpacity", "fillOpacity"], this.props = this.to, applyAppearStartAttributes(this.target, this.from);
       }
       onUpdate(end, ratio, out) {
         var _a;
@@ -36756,9 +36875,17 @@
       }
     }
 
+    const clipPathGeometryAttrs = {
+      x: !0,
+      y: !0,
+      x1: !0,
+      y1: !0,
+      width: !0,
+      height: !0
+    };
     class Update extends ACustomAnimate {
       constructor(from, to, duration, easing, params) {
-        super(from, to, duration, easing, params);
+        super(from, to, duration, easing, params), this.clipPathSyncKeys = null, this.clipPathSyncParent = null, this.clipPathSyncChildIndex = -1, this.clipPathSyncDisabled = !1;
       }
       onBind() {
         var _a, _b;
@@ -36771,7 +36898,25 @@
         } = this.params;
         diffAttrs = Object.assign({}, diffAttrs), (null === (_b = null == options ? void 0 : options.excludeChannels) || void 0 === _b ? void 0 : _b.length) && options.excludeChannels.forEach(channel => {
           delete diffAttrs[channel];
-        }), this.props = diffAttrs;
+        }), this.props = diffAttrs, this.clipPathSyncKeys = Object.keys(diffAttrs).filter(key => clipPathGeometryAttrs[key]), this.clipPathSyncDisabled = !this.clipPathSyncKeys.length, this.syncParentClipPathToTarget();
+      }
+      getStaticCommitAttrs() {
+        var _a;
+        if (!this.props) return null;
+        const target = this.target,
+          contextFinalAttrs = null === (_a = target.context) || void 0 === _a ? void 0 : _a.finalAttrs,
+          finalAttribute = "function" == typeof target.getFinalAttribute ? target.getFinalAttribute() : target.finalAttribute,
+          commitAttrs = {};
+        return Object.keys(this.props).forEach(key => {
+          contextFinalAttrs && Object.prototype.hasOwnProperty.call(contextFinalAttrs, key) ? commitAttrs[key] = contextFinalAttrs[key] : finalAttribute && Object.prototype.hasOwnProperty.call(finalAttribute, key) ? commitAttrs[key] = finalAttribute[key] : this.animate.validAttr(key) && (commitAttrs[key] = this.props[key]);
+        }), Object.keys(commitAttrs).length ? commitAttrs : null;
+      }
+      onEnd(cb) {
+        if (cb) return void super.onEnd(cb);
+        const commitAttrs = this.getStaticCommitAttrs();
+        commitAttrs && this.target.setAttributes(commitAttrs, !1, {
+          type: exports.AttributeUpdateType.ANIMATE_END
+        }), this.syncParentClipPathToTarget(), super.onEnd();
       }
       update(end, ratio, out) {
         if (this.onStart(), !this.props || !this.propKeys) return;
@@ -36780,7 +36925,58 @@
           if (!this.animate.validAttr(this.propKeys[index])) return;
           const key = this.propKeys[index];
           func(key, this.fromProps[key], this.props[key], easedRatio, this, this.target);
-        }), this.onUpdate(end, easedRatio, out);
+        }), this.syncParentClipPathToTarget(), this.onUpdate(end, easedRatio, out);
+      }
+      syncParentClipPathToTarget() {
+        var _a, _b;
+        if (this.clipPathSyncDisabled) return;
+        const target = this.target,
+          parent = target.parent,
+          path = null === (_a = null == parent ? void 0 : parent.attribute) || void 0 === _a ? void 0 : _a.path;
+        if (!(null === (_b = null == parent ? void 0 : parent.attribute) || void 0 === _b ? void 0 : _b.clip) || !Array.isArray(path) || !path.length) return;
+        const childIndex = this.getClipPathSyncChildIndex(parent);
+        if (childIndex < 0 || childIndex >= path.length) return;
+        const clipGraphic = path[childIndex];
+        if (!(null == clipGraphic ? void 0 : clipGraphic.attribute) || clipGraphic.type !== target.type || !this.isClipPathStaticTarget(clipGraphic)) return void (this.clipPathSyncDisabled = !0);
+        const syncAttrs = this.buildClipPathTransientAttrs(clipGraphic);
+        syncAttrs && applyAnimationTransientAttributes(clipGraphic, syncAttrs, exports.AttributeUpdateType.ANIMATE_UPDATE);
+      }
+      getClipPathSyncChildIndex(parent) {
+        var _a;
+        if (this.clipPathSyncParent === parent && this.clipPathSyncChildIndex >= 0) return this.clipPathSyncChildIndex;
+        const target = this.target;
+        let childIndex = -1;
+        return null === (_a = parent.forEachChildren) || void 0 === _a || _a.call(parent, (child, index) => child === target && (childIndex = index, !0)), this.clipPathSyncParent = parent, this.clipPathSyncChildIndex = childIndex, childIndex;
+      }
+      isClipPathStaticTarget(clipGraphic) {
+        var _a, _b;
+        const target = this.target,
+          targetFinalAttrs = this.getTargetFinalAttrs(),
+          clipGraphicFinalAttrs = "function" == typeof clipGraphic.getFinalAttribute ? clipGraphic.getFinalAttribute() : clipGraphic.finalAttribute,
+          clipFinalAttrs = null !== (_a = null != clipGraphicFinalAttrs ? clipGraphicFinalAttrs : clipGraphic.baseAttributes) && void 0 !== _a ? _a : clipGraphic.attribute,
+          keys = null !== (_b = this.clipPathSyncKeys) && void 0 !== _b ? _b : [];
+        return !!(keys.length && targetFinalAttrs && clipFinalAttrs) && keys.every(key => {
+          var _a, _b;
+          return this.isSameClipPathValue(clipFinalAttrs[key], null !== (_a = targetFinalAttrs[key]) && void 0 !== _a ? _a : null === (_b = target.attribute) || void 0 === _b ? void 0 : _b[key]);
+        });
+      }
+      getTargetFinalAttrs() {
+        var _a, _b, _c;
+        const target = this.target;
+        return null !== (_c = null !== (_b = null === (_a = target.context) || void 0 === _a ? void 0 : _a.finalAttrs) && void 0 !== _b ? _b : "function" == typeof target.getFinalAttribute ? target.getFinalAttribute() : target.finalAttribute) && void 0 !== _c ? _c : null;
+      }
+      isSameClipPathValue(a, b) {
+        return "number" == typeof a && "number" == typeof b ? Math.abs(a - b) < 1e-8 : a === b;
+      }
+      buildClipPathTransientAttrs(clipGraphic) {
+        var _a;
+        const target = this.target,
+          attrs = {};
+        return (null !== (_a = this.clipPathSyncKeys) && void 0 !== _a ? _a : []).forEach(key => {
+          var _a;
+          const nextValue = null === (_a = target.attribute) || void 0 === _a ? void 0 : _a[key];
+          Object.prototype.hasOwnProperty.call(clipGraphic.attribute, key) && void 0 !== nextValue && !this.isSameClipPathValue(clipGraphic.attribute[key], nextValue) && (attrs[key] = nextValue);
+        }), Object.keys(attrs).length ? attrs : null;
       }
     }
 
@@ -36901,7 +37097,7 @@
           from: from,
           to: to
         } = moveIn(this.target, this.params.options, this.params);
-        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(from);
+        this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, from);
       }
     }
     class MoveOut extends MoveBase {
@@ -36960,7 +37156,7 @@
           from: from,
           to: to
         } = rotateIn(this.target, this.params.options);
-        this.props = to, this.propKeys = ["angle"], this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(from);
+        this.props = to, this.propKeys = ["angle"], this.from = from, this.to = to, null === (_b = (_a = this.target).applyFinalAttributeToAttribute) || void 0 === _b || _b.call(_a), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && applyAppearStartAttributes(this.target, from);
       }
     }
     class RotateOut extends RotateBase {
@@ -36976,8 +37172,8 @@
 
     class MotionPath extends ACustomAnimate {
       constructor(from, to, duration, easing, params) {
-        var _a;
-        super(from, to, duration, easing, params), params && (this.pathLength = params.path.getLength(), this.path = params.path, this.distance = params.distance, this.totalLength = this.distance * this.pathLength, this.initAngle = null !== (_a = params.initAngle) && void 0 !== _a ? _a : 0, this.changeAngle = !!params.changeAngle, this.cb = params.cb);
+        var _a, _b, _c;
+        super(from, to, duration, easing, params), params && (this.pathLength = params.path.getLength(), this.path = params.path, this.distance = params.distance, this.totalLength = this.distance * this.pathLength, this.initAngle = null !== (_a = params.initAngle) && void 0 !== _a ? _a : 0, this.changeAngle = !!params.changeAngle, this.commitOnEnd = null === (_c = null !== (_b = params.commitOnEnd) && void 0 !== _b ? _b : params.saveOnEnd) || void 0 === _c || _c, this.cb = params.cb);
       }
       onBind() {
         this.from = {
@@ -36992,7 +37188,7 @@
             pos: pos,
             angle: angle
           } = this.path.getAttrAt(at);
-        attrs.x = pos.x, attrs.y = pos.y, this.changeAngle && (attrs.angle = angle + this.initAngle), this.cb && this.cb(this.from, this.to, ratio, this.target), this.target.setAttributes(attrs);
+        attrs.x = pos.x, attrs.y = pos.y, this.changeAngle && (attrs.angle = angle + this.initAngle), this.cb && this.cb(this.from, this.to, ratio, this.target), end && this.commitOnEnd ? this.target.setAttributes(attrs) : applyAnimationTransientAttributes(this.target, attrs);
       }
     }
 
@@ -40740,6 +40936,20 @@
       }
     }
 
+    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: exports.AttributeUpdateType.ANIMATE_BIND
+      });
+    }
+
     const DefaultAxisAnimation = {
       type: "default",
       duration: 300,
@@ -41065,33 +41275,29 @@
             var _a;
             if ("group" !== el.type && el.id) {
               const oldEl = prevInnerView[el.id];
-              if (el.setFinalAttributes(el.attribute), oldEl) {
+              if (oldEl) {
                 oldEl.release();
-                const oldAttrs = oldEl.attribute,
-                  finalAttrs = el.getFinalAttribute(),
+                const oldAttrs = cloneDeep(oldEl.attribute),
+                  finalAttrs = cloneDeep(el.attribute),
                   diffAttrs = diff(oldAttrs, finalAttrs);
                 let hasDiff = Object.keys(diffAttrs).length > 0;
-                if ("opacity" in oldAttrs && finalAttrs.opacity !== oldAttrs.opacity && (diffAttrs.opacity = null !== (_a = finalAttrs.opacity) && void 0 !== _a ? _a : 1, hasDiff = !0), animationConfig.update && hasDiff) {
-                  this._newElementAttrMap[el.id] = {
-                    state: "update",
-                    node: el,
-                    attrs: el.attribute
-                  };
-                  const oldAttrs = oldEl.attribute;
-                  el.setAttributes(oldAttrs), el.applyAnimationState(["update"], [{
-                    name: "update",
-                    animation: Object.assign(Object.assign({
-                      selfOnly: !0
-                    }, animationConfig.update), {
-                      type: "axisUpdate",
-                      customParameters: {
-                        config: animationConfig.update,
-                        diffAttrs: diffAttrs,
-                        lastScale: lastScale
-                      }
-                    })
-                  }]);
-                }
+                "opacity" in oldAttrs && finalAttrs.opacity !== oldAttrs.opacity && (diffAttrs.opacity = null !== (_a = finalAttrs.opacity) && void 0 !== _a ? _a : 1, hasDiff = !0), animationConfig.update && hasDiff && (this._newElementAttrMap[el.id] = {
+                  state: "update",
+                  node: el,
+                  attrs: finalAttrs
+                }, commitUpdateAnimationTarget(el, finalAttrs, oldAttrs), el.applyAnimationState(["update"], [{
+                  name: "update",
+                  animation: Object.assign(Object.assign({
+                    selfOnly: !0
+                  }, animationConfig.update), {
+                    type: "axisUpdate",
+                    customParameters: {
+                      config: animationConfig.update,
+                      diffAttrs: diffAttrs,
+                      lastScale: lastScale
+                    }
+                  })
+                }]));
               } else animationConfig.enter && (this._newElementAttrMap[el.id] = {
                 state: "enter",
                 node: el,
@@ -41435,7 +41641,10 @@
           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, {
@@ -41463,10 +41672,9 @@
         const duration = this.duration,
           easing = this.easing,
           {
-            config: config,
             diffAttrs: diffAttrs
           } = this.params;
-        animator.animate(this.target, {
+        commitUpdateAnimationTarget(this.target, Object.assign({}, diffAttrs)), animator.animate(this.target, {
           type: "to",
           to: Object.assign({}, diffAttrs),
           duration: duration,
@@ -42351,6 +42559,7 @@
         super(...arguments), this.mode = exports.AnimateMode.NORMAL;
       }
       onBind() {
+        this._started = !1;
         const currentInnerView = this.target.getInnerView(),
           prevInnerView = this.target.getPrevInnerView();
         prevInnerView && (this._newElementAttrMap = {}, traverseGroup(currentInnerView, el => {
@@ -42368,7 +42577,7 @@
                     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 = {
@@ -42380,7 +42589,7 @@
                 state: "enter",
                 node: el,
                 attrs: finalOpacityAttrs
-              }, el.setAttributes({
+              }, commitUpdateAnimationTarget(el, finalOpacityAttrs, {
                 opacity: 0,
                 fillOpacity: 0,
                 strokeOpacity: 0
@@ -42390,6 +42599,8 @@
         }));
       }
       onStart() {
+        if (this._started) return;
+        this._started = !0;
         let duration = this.duration,
           easing = this.easing;
         this._newElementAttrMap && Object.keys(this._newElementAttrMap).forEach(id => {
@@ -44486,7 +44697,7 @@
             text: curText,
             labelLine: curLabelLine
           } = currentLabel;
-        prevText.applyAnimationState(["update"], [{
+        commitUpdateAnimationTarget(prevText, null == curText ? void 0 : curText.attribute), commitUpdateAnimationTarget(prevLabelLine, null == curLabelLine ? void 0 : curLabelLine.attribute), prevText.applyAnimationState(["update"], [{
           name: "update",
           animation: {
             type: "labelUpdate",
@@ -44512,7 +44723,6 @@
       }
       _updateLabel(prevLabel, currentLabel) {
         const {
-            text: prevText,
             labelLine: prevLabelLine
           } = prevLabel,
           {
@@ -47081,7 +47291,10 @@
       null === (_a = null == graphic ? void 0 : graphic.animates) || void 0 === _a || _a.forEach(a => a.stop("end"));
       const fillOpacityConfig = null !== (_c = null === (_b = graphic.attribute) || void 0 === _b ? void 0 : _b.fillOpacity) && void 0 !== _c ? _c : 1,
         strokeOpacityConfig = null !== (_e = null === (_d = graphic.attribute) || void 0 === _d ? void 0 : _d.strokeOpacity) && void 0 !== _e ? _e : 1;
-      graphic.setAttributes({
+      commitUpdateAnimationTarget(graphic, {
+        fillOpacity: fillOpacityConfig,
+        strokeOpacity: strokeOpacityConfig
+      }, {
         fillOpacity: 0,
         strokeOpacity: 0
       }), graphic.animate().wait(delay).to({
@@ -47097,7 +47310,10 @@
     }
     function graphicFadeOut(graphic, delay, duration, easing) {
       var _a, _b, _c, _d;
-      graphic && (graphic.setAttributes({
+      graphic && (commitUpdateAnimationTarget(graphic, {
+        fillOpacity: 0,
+        strokeOpacity: 0
+      }, {
         fillOpacity: null !== (_b = null === (_a = graphic.attribute) || void 0 === _a ? void 0 : _a.fillOpacity) && void 0 !== _b ? _b : 1,
         strokeOpacity: null !== (_d = null === (_c = graphic.attribute) || void 0 === _c ? void 0 : _c.strokeOpacity) && void 0 !== _d ? _d : 1
       }), graphic.animate().wait(delay).to({
@@ -47117,7 +47333,11 @@
         lineDuration = .7 * duration,
         endSymbolDuration = .1 * duration,
         labelDuration = .1 * duration;
-      graphicFadeIn(line.startSymbol, delay, startSymbolDuration, easing), line.lines.forEach(line => line.setAttribute("clipRange", 0)), line.lines.forEach((l, index) => {
+      graphicFadeIn(line.startSymbol, delay, startSymbolDuration, easing), line.lines.forEach(line => commitUpdateAnimationTarget(line, {
+        clipRange: 1
+      }, {
+        clipRange: 0
+      })), line.lines.forEach((l, index) => {
         const stepDuration = lineDuration / line.lines.length;
         l.animate().wait(delay + startSymbolDuration + index * stepDuration).to({
           clipRange: 1
@@ -47175,7 +47395,11 @@
         decorativeDuration = .05 * duration,
         endSymbolDuration = .1 * duration,
         labelDuration = .1 * duration;
-      graphicFadeIn(itemLine.startSymbol, delay, startSymbolDuration, easing), itemLine.lines.forEach(line => line.setAttribute("clipRange", 0)), itemLine.lines.forEach((l, index) => {
+      graphicFadeIn(itemLine.startSymbol, delay, startSymbolDuration, easing), itemLine.lines.forEach(line => commitUpdateAnimationTarget(line, {
+        clipRange: 1
+      }, {
+        clipRange: 0
+      })), itemLine.lines.forEach((l, index) => {
         const stepDuration = lineDuration / itemLine.lines.length;
         l.animate().wait(delay + startSymbolDuration + index * stepDuration).to({
           clipRange: 1
@@ -49459,12 +49683,18 @@
                 let containerSize;
                 containerSize = this._itemContext.isHorizontal ? this._itemsContainer.AABBBounds.width() : this._itemsContainer.AABBBounds.height();
                 const startOffset = containerSize * start;
-                this.updateScrollMask(), animation ? this._itemsContainer.animate().to({
-                  [channel]: -startOffset
-                }, animationDuration, animationEasing) : this._itemsContainer.setAttribute(channel, -startOffset);
-              } else animation ? this._itemsContainer.animate().to({
-                [channel]: -(newPage - 1) * pageSize
-              }, animationDuration, animationEasing) : this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
+                if (this.updateScrollMask(), animation) {
+                  const attrs = {
+                    [channel]: -startOffset
+                  };
+                  commitUpdateAnimationTarget(this._itemsContainer, attrs), this._itemsContainer.animate().to(attrs, animationDuration, animationEasing);
+                } else this._itemsContainer.setAttribute(channel, -startOffset);
+              } else if (animation) {
+                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);
             }
           };
         if (this._itemContext.isScrollbar) {
@@ -52488,6 +52718,7 @@
         setActive(labelGroup, activeLabelStyle), setActive(symbolGroup, activeSymbolStyle);
       }
       appearAnimate(animateConfig) {
+        var _a;
         const {
             duration = 1e3,
             easing = "quadOut"
@@ -52503,26 +52734,39 @@
           perSymbolNormalDuration = 90 * percent,
           symbolDelay = 100 * percent,
           symbolNormalDelay = 600 * percent;
-        if (this._line && (this._line.setAttributes({
+        if (this._line && (commitUpdateAnimationTarget(this._line, {
+          clipRange: 1
+        }, {
           clipRange: 0
         }), this._line.animate().to({
           clipRange: 1
-        }, lineDuration, easing)), this._activeLine && (this._activeLine.setAttributes({
-          opacity: 0
-        }), this._activeLine.animate().wait(500).to({
-          opacity: 1
-        }, activeLineDuration, easing)), this._symbolGroup) {
+        }, lineDuration, easing)), this._activeLine) {
+          const opacity = null !== (_a = this._activeLine.attribute.opacity) && void 0 !== _a ? _a : 1;
+          commitUpdateAnimationTarget(this._activeLine, {
+            opacity: opacity
+          }, {
+            opacity: 0
+          }), this._activeLine.animate().wait(500).to({
+            opacity: opacity
+          }, activeLineDuration, easing);
+        }
+        if (this._symbolGroup) {
           const size = this._symbolGroup.count - 1,
             delay = percent * (1 === size ? 0 : 400 / (size - 1)),
             delayNormal = percent * (1 === size ? 0 : 240 / (size - 1));
           this._symbolGroup.forEachChildren((symbol, i) => {
+            var _a;
             const originAttrs = {};
             Object.keys(activeSymbolStyle).forEach(k => {
               originAttrs[k] = symbol.attribute[k];
-            }), symbol.setAttributes({
+            });
+            const opacity = null !== (_a = symbol.attribute.opacity) && void 0 !== _a ? _a : 1;
+            commitUpdateAnimationTarget(symbol, {
+              opacity: opacity
+            }, {
               opacity: 0
             }), symbol.animate().wait(symbolDelay + delay * i).to({
-              opacity: 1
+              opacity: opacity
             }, perSymbolDuration, easing), symbol.animate().wait(symbolNormalDelay + delayNormal * i).to(Object.assign({}, activeSymbolStyle), perSymbolNormalDuration, easing).to(Object.assign({}, originAttrs), perSymbolNormalDuration, easing);
           });
         }
@@ -52531,13 +52775,18 @@
             delay = percent * (1 === size ? 0 : 400 / (size - 1)),
             delayNormal = percent * (1 === size ? 0 : 240 / (size - 1));
           this._labelGroup.forEachChildren((label, i) => {
+            var _a;
             const originAttrs = {};
             Object.keys(activeLabelStyle).forEach(k => {
               originAttrs[k] = label.attribute[k];
-            }), label.setAttributes({
+            });
+            const opacity = null !== (_a = label.attribute.opacity) && void 0 !== _a ? _a : 1;
+            commitUpdateAnimationTarget(label, {
+              opacity: opacity
+            }, {
               opacity: 0
             }), label.animate().wait(symbolDelay + delay * i).to({
-              opacity: 1
+              opacity: opacity
             }, perSymbolDuration, easing), label.animate().wait(symbolNormalDelay + delayNormal * i).to(Object.assign({
               dy: 10
             }, activeLabelStyle), perSymbolNormalDuration, easing).to(Object.assign({
@@ -52571,7 +52820,11 @@
             duration = 1e3,
             easing = "quadOut"
           } = animateConfig;
-          this.animate().to({
+          commitUpdateAnimationTarget(this, {
+            clipRange: nextClipRange
+          }, {
+            clipRange: clipRange
+          }), this.animate().to({
             clipRange: nextClipRange
           }, duration, easing);
         } else this.setAttributes({
@@ -54290,7 +54543,7 @@
         return resolveLegacyApp().createStage(params);
     }
 
-    const version = "1.1.0-alpha.1";
+    const version = "1.1.0-alpha.10";
 
     exports.AComponentAnimate = AComponentAnimate;
     exports.ACustomAnimate = ACustomAnimate;