当 display=none 时 Material UI Tooltip 淡出答案

【问题标题】：MaterialUI Tooltip fade when display= none当 display=none 时 Material UI Tooltip 淡出
【发布时间】：2021-09-01 00:01:13
【问题描述】：

我在我的 reactjs 项目中使用了 materialUI ToolTip。当块从样式display: block 到样式display: none 时，该块中的工具提示在消失之前会很快消失。

这是我的例子： https://codesandbox.io/s/fade-block-tooltip-ui-lb51f

我在代码框示例中的问题：当我点击“点击我”按钮时，粉红色块将display: none 和工具提示在消失前快速消失。

感谢您的帮助。

【问题讨论】：

标签： reactjs material-ui tooltip

【解决方案1】：

我会这样做（见LIVE example 或下面的片段）。修复的重点是将两个块合二为一。从长远来看，它更容易扩展

import React, { useState } from "react";
import "./styles.css";
import Tooltip from "@material-ui/core/Tooltip";

const style = {
  width: 200,
  height: 200,
  display: "flex",
  justifyContent: "center",
  alignItems: "center"
};

export default function App() {
  const [open, setOpen] = useState(true);
  const onClick = () => setOpen(!open);
  const backgroundColor = open ? "pink" : "blue";
  const btnText = open ? "Clicl me" : "Back";

  return (
    <div className="App">
      <p>
        My problem: When I click button "Click me", pink block `display: none`
        and tooltip fade before dissapear
      </p>

      <div
        style={{
          ...style,
          backgroundColor
        }}
      >
        <Tooltip title="Tool tip" placement="top">
          <button type="button" onClick={onClick}>
            {btnText}
          </button>
        </Tooltip>
      </div>
    </div>
  );
}

请告诉我它是否有效）

【讨论】：

我要保留蓝色块，改变颜色是2块的例子

【解决方案2】：

保持与现在相同，但将工具提示包装在三元组中：

https://codesandbox.io/s/fade-block-tooltip-ui-forked-sphxl?file=/src/App.js

UPD：如果您在 DOM 中需要这个，最好自己使用工具提示样式，而不仅仅是将 display: none 添加到父级，因为工具提示有一个隐藏和显示动画，需要一些时间才能隐藏

【讨论】：