chore: merge 'feat/tooltip/displayTransition' branch

# Conflicts:
#	src/component/tooltip/TooltipHTMLContent.ts

Author: plainheart

src/component/tooltip/TooltipHTMLContent.ts

@@ -186,8 +186,8 @@ function assembleCssText(tooltipModel: Model<TooltipOption>, enableTransition?:
     const boxShadow = `${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px ${shadowColor}`;
 
     cssText.push('box-shadow:' + boxShadow);
-    // Animation transition. Do not animate when transitionDuration is 0.
-    enableTransition && transitionDuration && cssText.push(assembleTransition(transitionDuration, onlyFade));
+    // Animation transition. Do not animate when transitionDuration <= 0.
+    enableTransition && transitionDuration > 0 && cssText.push(assembleTransition(transitionDuration, onlyFade));
 
     if (backgroundColor) {
         cssText.push('background-color:' + backgroundColor);
@@ -284,6 +284,8 @@ class TooltipHTMLContent {
      */
     private _longHideTimeout: number;
 
+    private _enableDisplayTransition: boolean;
+
     constructor(
         api: ExtensionAPI,
         opt: TooltipContentOption
@@ -376,6 +378,9 @@ class TooltipHTMLContent {
         // update alwaysShowContent
         this._alwaysShowContent = alwaysShowContent;
 
+        this._enableDisplayTransition = tooltipModel.get('displayTransition')
+            && tooltipModel.get('transitionDuration') > 0;
+
         // update className
         this.el.className = tooltipModel.get('className') || '';
 
@@ -499,9 +504,13 @@ class TooltipHTMLContent {
 
     hide() {
         const style = this.el.style;
-        style.visibility = 'hidden';
-        style.display = 'none';
-        style.opacity = '0';
+        if (this._enableDisplayTransition) {
+            style.visibility = 'hidden';
+            style.opacity = '0';
+        }
+        else {
+            style.display = 'none';
+        }
         env.transform3dSupported && (style.willChange = '');
         this._show = false;
         this._longHideTimeout = setTimeout(() => this._longHide = true, 500) as any;

src/component/tooltip/TooltipModel.ts

@@ -51,8 +51,6 @@ export interface TooltipOption extends CommonTooltipOption<TopLevelFormatterPara
      */
     trigger?: 'item' | 'axis' | 'none'
 
-    displayMode?: 'single' | 'multipleByCoordSys';
-
     /**
      * 'auto': use html by default, and use non-html if `document` is not defined
      * 'html': use html for tooltip
@@ -106,13 +104,11 @@ class TooltipModel extends ComponentModel<TooltipOption> {
 
         alwaysShowContent: false,
 
-        displayMode: 'single', // 'single' | 'multipleByCoordSys'
-
         renderMode: 'auto', // 'auto' | 'html' | 'richText'
 
         // whether restraint content inside viewRect.
         // If renderMode: 'richText', default true.
-        // If renderMode: 'html', defaut false (for backward compat).
+        // If renderMode: 'html', defaults to `false` (for backward compat).
         confine: null,
 
         showDelay: 0,
@@ -122,6 +118,8 @@ class TooltipModel extends ComponentModel<TooltipOption> {
         // Animation transition time, unit is second
         transitionDuration: 0.4,
 
+        displayTransition: true,
+
         enterable: false,
 
         backgroundColor: '#fff',

src/util/types.ts

@@ -1303,6 +1303,15 @@ export interface CommonTooltipOption<FormatterParams> {
      */
     enterable?: boolean
 
+    /**
+     * Whether enable display transition when show/hide tooltip.
+     * Defaults to `true` for backward compatibility.
+     * If set to `false`, the tooltip 'display' will be set to 'none' when hidden.
+     * @default true
+     * @since v6.0.0
+     */
+    displayTransition?: boolean
+
     backgroundColor?: ColorString
     borderColor?: ColorString
     borderRadius?: number