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

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);
       }
@@ -9035,13 +9049,22 @@
           "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();
@@ -9464,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);
@@ -9495,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
@@ -9534,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(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: exports.AttributeUpdateType.STATE
         }), this._emitCustomEvent("afterStateUpdate", {
           type: exports.AttributeUpdateType.STATE
@@ -10966,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;
@@ -32841,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,
@@ -40784,6 +40864,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,
@@ -41109,33 +41203,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,
@@ -41479,7 +41569,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, {
@@ -41507,10 +41600,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,
@@ -42395,6 +42487,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 => {
@@ -42412,7 +42505,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 = {
@@ -42424,7 +42517,7 @@
                 state: "enter",
                 node: el,
                 attrs: finalOpacityAttrs
-              }, el.setAttributes({
+              }, commitUpdateAnimationTarget(el, finalOpacityAttrs, {
                 opacity: 0,
                 fillOpacity: 0,
                 strokeOpacity: 0
@@ -42434,6 +42527,8 @@
         }));
       }
       onStart() {
+        if (this._started) return;
+        this._started = !0;
         let duration = this.duration,
           easing = this.easing;
         this._newElementAttrMap && Object.keys(this._newElementAttrMap).forEach(id => {
@@ -44530,7 +44625,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",
@@ -44556,7 +44651,6 @@
       }
       _updateLabel(prevLabel, currentLabel) {
         const {
-            text: prevText,
             labelLine: prevLabelLine
           } = prevLabel,
           {
@@ -47125,7 +47219,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({
@@ -47141,7 +47238,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({
@@ -47161,7 +47261,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
@@ -47219,7 +47323,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
@@ -49503,12 +49611,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) {
@@ -52532,6 +52646,7 @@
         setActive(labelGroup, activeLabelStyle), setActive(symbolGroup, activeSymbolStyle);
       }
       appearAnimate(animateConfig) {
+        var _a;
         const {
             duration = 1e3,
             easing = "quadOut"
@@ -52547,26 +52662,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);
           });
         }
@@ -52575,13 +52703,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({
@@ -52615,7 +52748,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({
@@ -54334,7 +54471,7 @@
         return resolveLegacyApp().createStage(params);
     }
 
-    const version = "1.1.0-alpha.6";
+    const version = "1.1.0-alpha.8";
 
     exports.AComponentAnimate = AComponentAnimate;
     exports.ACustomAnimate = ACustomAnimate;