Material UI 工具提示在 display= none 时淡出

Question

我在我的 reactjs 项目中使用了 materialUI ToolTip。当块从样式 display: block 变为样式 display: none 时，该块中的工具提示在消失之前会非常快速地淡化。

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

我在 codesanbox 示例中遇到的问题：当我单击“单击我”按钮时，粉红色块会display: none并且工具提示在消失之前很快消失。

感谢您的帮助。

Answer 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>
  );
}

请告诉我它是否有效）

Answer 2

与现在一样，但将工具提示包裹在三元组中：

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

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

Material UI 工具提示在 display= none 时淡出

MaterialUI Tooltip fade when display= none

reactjs

material-ui

tooltip