根据当前状态使用动画淡入/淡出元素答案

【问题标题】：Fading elements in / out with animations based on the current state根据当前状态使用动画淡入/淡出元素
【发布时间】：2022-11-17 20:43:46
【问题描述】：

我有一个要基于布尔状态显示/隐藏的元素，但我也希望它使用转换来实现。检查以下示例：

const App = () => {
  const [visible, setVisible] = React.useState(false)
    return (
        <div>
            <button onClick={() => {setVisible(!visible)}}> Show/HIde </button>
            <div className={visible ? 'visible' : 'hidden'}> I'm a div  </div>
        </div>
    );
}

ReactDOM.render(
    <App />,
    document.getElementById("root")
);

.hidden,
.visible {
    border: 2px solid black;
    display: inline;
}

.hidden {
    animation-name: fadeInOpacity;
    animation-duration: 1s;
    opacity: 0;
  height: 0px;
  overflow: hidden;
  width: 0px;
}
.visible {
    opacity: 1;
    animation-name: fadeOutOpacity;
    animation-duration: 1s;
}

@keyframes fadeOutOpacity {
    0% {
        opacity: 0;
        scale: 0.8;
    }
    100% {
        opacity: 1;
        scale: 1;
    }
}

@keyframes fadeInOpacity {
    0% {
        opacity: 1;
        scale: 1;
    }
    100% {
        opacity: 0;
        scale: 0.8;
    }
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

我有一些问题：它出现在页面加载/刷新上，然后执行动画。此外，当它不可见时，div 仍然存在。它只将不透明度设置为零。因此存在与其他元素相互作用的潜在风险。例如，当您将鼠标悬停在按钮旁边的空间上时，光标会发生变化，因为它悬停在文本上，即使它是不可见的。

理想情况下，我希望它完全消失或离开屏幕。该元素将有一个 position: fixed 在我的项目中。

处理这种情况的最佳做法是什么？请给我一个sn-p好吗？

【问题讨论】：

标签： html css reactjs css-transitions css-transforms

【解决方案1】：

我设法用以下代码修复它：

const App = () => {
  const [visible, setVisible] = React.useState(false);
  const divRef = React.useRef(false);

  React.useEffect(() => {
    divRef.current.className = 'hidden-did-fade-out';
  }, []);

  function onAnimationEnd(e) {
    if (e.animationName === 'fadeOutOpacity') {
      e.target.className = 'hidden-did-fade-out';
    }
  }

  return (
    <div>
      <button
        onClick={() => {
          setVisible(!visible);
        }}
      >
        Show/HIde
      </button>
      <div ref={divRef} onAnimationEnd={onAnimationEnd} className={visible ? 'visible' : 'hidden'}>
        I'm a div
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

.hidden,
.visible {
  border: 2px solid black;
  display: flex;
  visibility: visible;
}

.hidden {
  animation-name: fadeOutOpacity;
  animation-duration: 1s;
  opacity: 0;
}

.hidden-did-fade-out {
  display: none;
}

.visible {
  animation-name: fadeInOpacity;
  animation-duration: 1s;
  opacity: 1;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
    scale: 0.8;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes fadeOutOpacity {
  0% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 0.8;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：