fix(tree): fade out label when removed

src/chart/helper/Symbol.ts

@@ -24,7 +24,7 @@ import { enterEmphasis, leaveEmphasis, enableHoverEmphasis } from '../../util/st
 import {parsePercent} from '../../util/number';
 import {getDefaultLabel} from './labelHelper';
 import List from '../../data/List';
-import { ColorString, BlurScope } from '../../util/types';
+import { ColorString, BlurScope, AnimationOption } from '../../util/types';
 import SeriesModel from '../../model/Series';
 import { PathProps } from 'zrender/src/graphic/Path';
 import { SymbolDrawSeriesScope, SymbolDrawItemModelOption } from './SymbolDraw';
@@ -352,13 +352,35 @@ class Symbol extends graphic.Group {
     }
 
     fadeOut(cb: () => void, opt?: {
-        keepLabel: boolean
+        fadeLabel: boolean,
+        animation?: AnimationOption
     }) {
         const symbolPath = this.childAt(0) as ECSymbol;
+        const seriesModel = this._seriesModel;
+        const dataIndex = getECData(this).dataIndex;
+        const animationOpt = opt && opt.animation;
         // Avoid mistaken hover when fading out
         this.silent = symbolPath.silent = true;
         // Not show text when animating
-        !(opt && opt.keepLabel) && (symbolPath.removeTextContent());
+        if (opt && opt.fadeLabel) {
+            const textContent = symbolPath.getTextContent();
+            if (textContent) {
+                graphic.removeElement(textContent, {
+                    style: {
+                        opacity: 0
+                    }
+                }, seriesModel, {
+                    dataIndex,
+                    removeOpt: animationOpt,
+                    cb() {
+                        symbolPath.removeTextContent();
+                    }
+                });
+            }
+        }
+        else {
+            symbolPath.removeTextContent();
+        }
 
         graphic.removeElement(
             symbolPath,
@@ -369,9 +391,8 @@ class Symbol extends graphic.Group {
                 scaleX: 0,
                 scaleY: 0
             },
-            this._seriesModel,
-            getECData(this).dataIndex,
-            cb
+            seriesModel,
+            { dataIndex, cb, removeOpt: animationOpt}
         );
     }
 

src/chart/tree/TreeView.ts

@@ -630,7 +630,10 @@ function removeNode(
         removeOpt: removeAnimationOpt
     });
 
-    symbolEl.fadeOut(null, {keepLabel: true});
+    symbolEl.fadeOut(null, {
+        fadeLabel: true,
+        animation: removeAnimationOpt
+    });
 
     const sourceSymbolEl = data.getItemGraphicEl(source.dataIndex) as TreeSymbol;
     const sourceEdge = sourceSymbolEl.__edge;

src/label/LabelManager.ts

@@ -24,7 +24,8 @@ import {
     BoundingRect,
     Polyline,
     updateProps,
-    initProps
+    initProps,
+    isElementRemoved
 } from '../util/graphic';
 import { getECData } from '../util/innerStore';
 import ExtensionAPI from '../ExtensionAPI';
@@ -493,7 +494,12 @@ class LabelManager {
         const textEl = el.getTextContent();
         const guideLine = el.getTextGuideLine();
         // Animate
-        if (textEl && !textEl.ignore && !textEl.invisible && !(el as ECElement).disableLabelAnimation) {
+        if (textEl
+            && !textEl.ignore
+            && !textEl.invisible
+            && !(el as ECElement).disableLabelAnimation
+            && !isElementRemoved(el)
+        ) {
             const layoutStore = labelLayoutInnerStore(textEl);
             const oldLayout = layoutStore.oldLayout;
             const ecData = getECData(el);