fix(animation): force stop remove animation before init again.

src/chart/bar/BarView.ts

@@ -28,7 +28,8 @@ import {
     enableHoverEmphasis,
     setLabelStyle,
     updateLabel,
-    initLabel
+    initLabel,
+    removeElement
 } from '../../util/graphic';
 import Path, { PathProps } from 'zrender/src/graphic/Path';
 import Group from 'zrender/src/graphic/Group';
@@ -703,7 +704,7 @@ function removeRect(
 ) {
     // Not show text when animating
     el.removeTextContent();
-    updateProps(el, {
+    removeElement(el, {
         style: {
             opacity: 0
         }
@@ -719,7 +720,7 @@ function removeSector(
 ) {
     // Not show text when animating
     el.removeTextContent();
-    updateProps(el, {
+    removeElement(el, {
         style: {
             opacity: 0
         }

src/chart/bar/PictorialBarView.ts

@@ -869,7 +869,7 @@ function removeBar(
     bar.__pictorialClipPath && (animationModel = null);
 
     zrUtil.each(pathes, function (path) {
-        graphic.updateProps(
+        graphic.removeElement(
             path, { scaleX: 0, scaleY: 0 }, animationModel, dataIndex,
             function () {
                 bar.parent && bar.parent.remove(bar);

src/chart/helper/Symbol.ts

@@ -169,20 +169,18 @@ class Symbol extends graphic.Group {
 
         if (isInit) {
             const symbolPath = this.childAt(0) as ECSymbol;
-            // Always fadeIn. Because it has fadeOut animation when symbol is removed..
-            // const fadeIn = seriesScope && seriesScope.fadeIn;
-            const fadeIn = true;
 
             const target: PathProps = {
                 scaleX: this._sizeX,
-                scaleY: this._sizeY
-            };
-            fadeIn && (target.style = {
+                scaleY: this._sizeY,
+                style: {
+                    // Always fadeIn. Because it has fadeOut animation when symbol is removed..
                     opacity: symbolPath.style.opacity
-            });
+                }
+            };
 
             symbolPath.scaleX = symbolPath.scaleY = 0;
-            fadeIn && (symbolPath.style.opacity = 0);
+            symbolPath.style.opacity = 0;
 
             graphic.initProps(symbolPath, target, seriesModel, idx);
         }
@@ -311,7 +309,7 @@ class Symbol extends graphic.Group {
         // Not show text when animating
         !(opt && opt.keepLabel) && (symbolPath.removeTextContent());
 
-        graphic.updateProps(
+        graphic.removeElement(
             symbolPath,
             {
                 style: {

src/chart/line/LineSeries.ts

@@ -53,6 +53,7 @@ export interface LineDataItemOption extends SymbolOptionMixin {
     }
 }
 
+
 export interface LineSeriesOption extends SeriesOption,
     SeriesOnCartesianOptionMixin,
     SeriesOnPolarOptionMixin,

src/chart/line/LineView.ts

@@ -501,7 +501,7 @@ class LineView extends ChartView {
             // Stop symbol animation and sync with line points
             // FIXME performance?
             data.eachItemGraphicEl(function (el) {
-                el.stopAnimation(true);
+                el.stopAnimation('', true);
             });
 
             // In the case data zoom triggerred refreshing frequently

src/component/timeline/SliderTimelineView.ts

@@ -795,7 +795,7 @@ function pointerMoveTo(
         pointer.y = 0;
     }
     else {
-        pointer.stopAnimation(true);
+        pointer.stopAnimation('', true);
         pointer.animateTo({
             x: toCoord,
             y: 0

src/echarts.ts

@@ -554,7 +554,7 @@ class ECharts extends Eventful {
         const list = zr.storage.getDisplayList();
         // Stop animations
         zrUtil.each(list, function (el: Element) {
-            el.stopAnimation(true);
+            el.stopAnimation('', true);
         });
 
         return (zr.painter as SVGPainter).toDataURL();

src/util/graphic.ts

@@ -688,7 +688,7 @@ type LabelModelForText = Model<Omit<
 }>;
 
 function getLabelText<LDI>(
-    opt?: SetLabelStyleOpt<LDI>,
+    opt: SetLabelStyleOpt<LDI>,
     normalModel: LabelModel,
     emphasisModel: LabelModel,
     interpolateValues?: ParsedValue | ParsedValue[]
@@ -1136,7 +1136,7 @@ type AnimateOrSetPropsOption = {
 };
 
 function animateOrSetProps<Props>(
-    isUpdate: boolean,
+    animationType: 'init' | 'update' | 'remove',
     el: Element<Props>,
     props: Props,
     animatableModel?: Model<AnimationOptionMixin> & {
@@ -1158,19 +1158,22 @@ function animateOrSetProps<Props>(
         isFrom = dataIndex.isFrom;
         dataIndex = dataIndex.dataIndex;
     }
+    const isUpdate = animationType === 'update';
+    const isRemove = animationType === 'remove';
     // Do not check 'animation' property directly here. Consider this case:
     // animation model is an `itemModel`, whose does not have `isAnimationEnabled`
     // but its parent model (`seriesModel`) does.
     const animationEnabled = animatableModel && animatableModel.isAnimationEnabled();
 
     if (animationEnabled) {
-        let duration = animatableModel.getShallow(
+        // TODO Configurable
+        let duration = isRemove ? 200 : animatableModel.getShallow(
             isUpdate ? 'animationDurationUpdate' : 'animationDuration'
         );
-        const animationEasing = animatableModel.getShallow(
+        const animationEasing = isRemove ? 'cubicOut' : animatableModel.getShallow(
             isUpdate ? 'animationEasingUpdate' : 'animationEasing'
         );
-        let animationDelay = animatableModel.getShallow(
+        let animationDelay = isRemove ? 0 : animatableModel.getShallow(
             isUpdate ? 'animationDelayUpdate' : 'animationDelay'
         );
         if (typeof animationDelay === 'function') {
@@ -1185,6 +1188,11 @@ function animateOrSetProps<Props>(
             duration = duration(dataIndex as number);
         }
 
+        if (!isRemove) {
+            // Must stop the remove animation.
+            el.stopAnimation('remove');
+        }
+
         duration > 0
             ? (
                 isFrom
@@ -1194,6 +1202,7 @@ function animateOrSetProps<Props>(
                         easing: animationEasing,
                         done: cb,
                         force: !!cb || !!during,
+                        scope: animationType,
                         during: during
                     })
                     : el.animateTo(props, {
@@ -1203,6 +1212,7 @@ function animateOrSetProps<Props>(
                         done: cb,
                         force: !!cb || !!during,
                         setToFinal: true,
+                        scope: animationType,
                         during: during
                     })
             )
@@ -1240,7 +1250,7 @@ function updateProps<Props>(
     cb?: AnimateOrSetPropsOption['cb'] | AnimateOrSetPropsOption['during'],
     during?: AnimateOrSetPropsOption['during']
 ) {
-    animateOrSetProps(true, el, props, animatableModel, dataIndex, cb, during);
+    animateOrSetProps('update', el, props, animatableModel, dataIndex, cb, during);
 }
 
 export {updateProps};
@@ -1261,7 +1271,21 @@ export function initProps<Props>(
     cb?: AnimateOrSetPropsOption['cb'] | AnimateOrSetPropsOption['during'],
     during?: AnimateOrSetPropsOption['during']
 ) {
-    animateOrSetProps(false, el, props, animatableModel, dataIndex, cb, during);
+    animateOrSetProps('init', el, props, animatableModel, dataIndex, cb, during);
+}
+
+/**
+ * Remove graphic element
+ */
+export function removeElement<Props>(
+    el: Element<Props>,
+    props: Props,
+    animatableModel?: Model<AnimationOptionMixin>,
+    dataIndex?: AnimateOrSetPropsOption['dataIndex'] | AnimateOrSetPropsOption['cb'] | AnimateOrSetPropsOption,
+    cb?: AnimateOrSetPropsOption['cb'] | AnimateOrSetPropsOption['during'],
+    during?: AnimateOrSetPropsOption['during']
+) {
+    animateOrSetProps('remove', el, props, animatableModel, dataIndex, cb, during);
 }
 
 function animateOrSetLabel<Props extends PathProps>(
@@ -1278,7 +1302,7 @@ function animateOrSetLabel<Props extends PathProps>(
     const valueAnimationEnabled = labelModel && labelModel.get('valueAnimation');
     if (valueAnimationEnabled) {
         const precisionOption = labelModel.get('precision');
-        let precision: number = precisionOption === 'auto' ? 0 : precisionOption;
+        const precision: number = precisionOption === 'auto' ? 0 : precisionOption;
 
         let interpolateValues: (number | string)[] | (number | string);
         const rawValues = seriesModel.getRawValue(dataIndex);