React - 淡入 div、暂停和淡出 div

Question

在我的 React 应用程序中，我正在尝试淡入 div，稍等片刻，然后淡出。除了淡出，一切都很好。我的 SCSS 看起来像这样：

$orange-color: #DD7C15;
$white-color: #FFFFFF;
$black-color: #222222;

.App {
  font-family: sans-serif;
  text-align: center;
}

.message-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100000;
  width: 100vw;
  color: $orange-color;
  font-size: 4em;
  text-align: center;
  background-color: $white-color;
  border: 2px solid $black-color;
  opacity: 0.9;
  animation: fadeIn 2s ease-in;

  &.hide {
    opacity: 0;
    animation: fadeOut 2s ease-out;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}

以及我的相关 React 代码：

const showBanner = () => {
    setMessageBannerText("My sweet awesome banner!!");
    setTimeout(() => {
      setMessageBannerText("");
    }, 3000);
  };

  const bannerClasses =
    messageBannerText === "" ? "message-banner hide" : "message-banner";

我创建了一个沙箱来展示我在说什么。 https://codesandbox.io/s/brave-grass-q1y6j

Answer 1

问题：

动画工作正常，但您在动画播放时删除了内容setMessageBannerText("");，因此它不可见

解法：

所以不要让内容空白，你应该保持动画的状态

1) 解法：

const steps = {
  0: "", // <--- blank coz message-banner has animation itself
  1: "message-banner",
  2: "message-banner hide"
};

export default function App() {
  const messageBannerText = "My sweet awesome banner!!";
  const [animationStep, setAnimationStep] = useState(0);

  const showBanner = () => {
    setAnimationStep(1);
    setTimeout(() => {
      // setMessageBannerText(""); // <---- issue
      setAnimationStep(2);
    }, 3000);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={showBanner}>Show Banner</button>
      <MessageBanner text={messageBannerText} classes={steps[animationStep]} />
    </div>
  );
}

工作演示：

2）解决方案：（有css改动，但仍需按照上述改动）

.message-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100000;
  width: 100vw;
  color: $orange-color;
  font-size: 4em;
  text-align: center;
  background-color: $white-color;
  border: 2px solid $black-color;
  opacity: 0;

  &.animate {
    opacity: 0;
    animation: fadeInOut 5s ease-out;
  }
}

// single animation for fade in and fade out
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.9;
  }
  70% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}

  const [show, setShow] = useState(false);

  const showBanner = () => {
    if (!show) { // <--- just for safe side, if animation is going on, then ignore state change
      setShow(true);
      setTimeout(() => {
        setShow(false);
      }, 5000);
    }
  };

  const bannerClasses = show ? "message-banner animate" : "message-banner";

工作演示：

Answer 2

嘿，我已经编辑了您的沙盒以达到您想要的结果：-

变化：-

1) 添加了 show 和 hide 类.

2) 引入了用于转换的布尔状态，而不是依赖于文本，因为您的 message-banner div 没有自己的高度或宽度。我们将简单地让文本保留但隐藏 div 远离用户。

3) 使用 transition 而不是 animation，因为您只是在两种状态之间切换，并且您希望在应用程序的其余部分坚持使用这些状态。对于动画，您将不得不做更多的技巧才能让它们坚持下去。另外 animation 适用于更复杂的场景。

React - 淡入 div、暂停和淡出 div

React - fade in div, pause and fade out div

css

fadeout

fadein

reactjs