在 React 中，单击按钮时，显示警报 5 秒，然后隐藏警报

Question

我们将这个 CSS 用于 div（或任何使用 animate 类的元素）在 4 秒后消失的动画。

@keyframes FadeAnimation {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.animate {
  animation: FadeAnimation 4s ease-in .1s forwards;
}

在 react 中，我们有一个可以点击的按钮，当点击按钮时，animate 类被添加到我们的 Alert div 中（之前是隐藏的）：

const [isUpdating, setIsUpdating] = useState(false)
const [showAlert, setShowAlert] = useState(false)
const handleButtonClick = async () => {
    setIsUpdating(true);

    // Axios request to update user info
    try {
        const updateUserObj = { fullName, email };
        const userId = ...;
        const updateResponse = await Axios.put(`/users/update/${userId}`, updateUserObj);
        
        // Set States Following Successful Login
        setIsUpdating(false);
        setShowAlert(true); // setting to true to display hte alert
    } catch (err) {
        setIsUpdating(false);
    }
};

return (
    <Button onClick={handleButtonClick}>
        {`${isUpdating ? 'Updating...' : 'Submit Button'}`}
    />
    <Alert
        className={`modal-alert ${showAlert ? 'animate' : ''}`}
        variant='success'
    >
        Your profile was updated
    </Alert>);
)

此按钮单击处理提交更新我们数据库中用户信息的表单，它还通过将 showAlert 状态更新为 true 来显示警报，这会将 animate 添加为警报中的一个类。

我们的问题是这种方法只适用于按钮的第一次点击，而不适用于后续点击。当第一次单击该按钮时，showAlert 被设置为 true，并且没有任何反应将其转回 false。 CSS 处理 4 秒后隐藏警报，但按钮不再可用。

// Get a hook function
const {useState} = React;

const Example = ({title}) => {
  const [isUpdating, setIsUpdating] = useState(false)
  const [showAlert, setShowAlert] = useState(false)
  const handleButtonClick = () => {
    setIsUpdating(true);
    setIsUpdating(false);
    setShowAlert(true); // setting to true to display hte alert
  };

  let alertClass = showAlert ? 'modal-alert animate' : 'modal-alert';
  let alertStyles = showAlert ? {} : { opacity: 0, visibility: 'hidden', pointerEvents: 'none' };
  return (
    <div>
      <div
        className='submit-button' 
        onClick={handleButtonClick}
      >
        Submit Button
      </div>
      <div
          className={alertClass}
          style={alertStyles}
          variant='success'
      >
          Your profile was updated
      </div>
    </div>
  )
};

// Render it
ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

.modal-alert {
  border: 1px solid #222222;
}

.submit-button {
  cursor: pointer;
  background: blue;
  border-radius: 5px;
  padding: 10px 15px;
  color: white;
  font-size: 1em;
  &:hover {
    background: darkblue;
  }
}

@keyframes FadeAnimation {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.animate {
  animation: FadeAnimation 4s ease-in .1s forwards;
}

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

Answer 1

您可以使用onAnimationEnd 合成事件来修改您的状态：

<Alert
  className={`modal-alert ${showAlert ? 'animate' : ''}`}
  variant='success'
  onAnimationEnd={() => setShowAlert(false)}
>