Material-ui 中的 Fade 只是禁用组件的可见性。如何获得淡入淡出效果并真正隐藏组件

reactjs

1个回答

写回答

swx1900

2025-06-26 00:00

+ 关注

CSS
CSS

使用 Material-UI 中的组件可以实现淡入淡出的效果，但它只是禁用组件的可见性，并没有真正隐藏组件。如果需要在淡出完成后真正隐藏组件，我们可以通过结合使用和 CSS 的一些属性来实现。

首先，让我们来看一下如何使用组件来实现淡入淡出的效果。在 Material-UI 中，组件用于渲染一个从透明到不透明的过渡效果。

JSx
import React from 'react';
import Fade from '@material-ui/core/Fade';
function App() {
  const [isVisible, setIsVisible] = React.useState(true);
  return (
    <Fade in={isVisible}>
      <div>
        {/* 组件内容 */}
      </div>
    </Fade>
  );
}

在上面的例子中，我们使用了一个名为 isVisible 的状态来控制组件的可见性。当 isVisible 的值为 true 时，组件会被渲染并显示；当 isVisible 的值为 false 时，组件会被渲染但不显示。

但是，即使在淡出完成后，组件仍然占据着页面上的空间。如果我们希望在淡出完成后真正隐藏组件，我们可以结合使用和 CSS 的一些属性来实现。

首先，我们可以在组件上设置 unmountOnExit 属性为 true，这样在淡出完成后会自动卸载组件，从而隐藏组件。

接下来，我们可以利用 CSS 的 transition 属性来为组件添加淡入淡出的动画效果。我们可以通过在组件的样式中添加 transition: opacity 500ms 来实现从透明到不透明的过渡效果，并设置过渡时间为500毫秒。

下面是完整的代码示例：

JSx
import React from 'react';
import Fade from '@material-ui/core/Fade';
import './App.CSS';
function App() {
  const [isVisible, setIsVisible] = React.useState(true);
  const handleButtonClick = () => {
    setIsVisible(!isVisible);
  };
  return (
    <div>
      <button onClick={handleButtonClick}>
        {isVisible ? '隐藏组件' : '显示组件'}
      </button>
      <Fade in={isVisible} unmountOnExit>
        <div className={<code>fade-contAIner ${isVisible ? 'visible' : 'hidden'}</code>}>
          {/* 组件内容 */}
        </div>
      </Fade>
    </div>
  );
}
export default App;

在上面的代码中，我们通过添加一个名为 fade-contAIner 的 CSS 类来包裹组件，并根据 isVisible 的值来动态添加 visible 或 hidden 类。visible 类用于显示组件，而 hidden 类用于隐藏组件。

通过上述的代码，我们可以实现在淡出完成后真正隐藏组件的效果，并且添加了淡入淡出的动画效果。这样用户在切换组件的可见性时，可以获得更平滑的过渡体验。

举报有用（4）分享收藏

Material-ui 中的 Fade 只是禁用组件的可见性。如何获得淡入淡出效果并真正隐藏组件

1个回答

swx1900

热门话题

相关问题