Javascript 用于消失div动画的CSS不会在悬停时暂停

我正在处理一个在

x

一定时间后出现/消失的snackbar，我希望当我将鼠标悬停在snackbar上时计时器暂停

然而，我所阐述的方式似乎不允许这样做，使用

setTimeout

和

useState

我在网上找不到太多关于如何解决这个问题的信息，所以任何帮助都将不胜感激

App.js

const App = () => {

  const [showSnack, setShowSnack] = useState(false);

  const toggle = () => {
    setShowSnack(true);
    setTimeout(() => {
      setShowSnack(false);
    }, 1000);
  }

  return (
    <div>
      <button onClick={toggle}>Toggle</button>
      <Snack show={showSnack} />
    </div>
  );
}

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

const Snack = ({show}) => {

  return(
    <div className={`my-snack ${show ? 'show' : ''}`}>My Snackbar</div>
  );
}

.my-snack {
  position: fixed;
  width: 100%;
  height: 500px;
  background: lightgray;
  bottom: 0;
  visibility: hidden;
  cursor: pointer;
}

.my-snack.show {
  visibility: visible;
  animation: fadein 0.5s, fadeout 0.5s 9.6s;
  animation-play-state: running;
}

.my-snack:hover {
  animation-play-state: paused paused;
}

/*Animations to fade the snackbar in and out*/
@keyframes fadein {
  from {bottom: -500px;}
  to {bottom: 0;}
}

@keyframes fadeout {
  from {bottom: 0;}
  to {bottom: -500px; opacity: 0;}
}

---

我相信你可能会把CSS动画与snackbar本身的显示和隐藏混为一谈。您可以使用

onMouseOver

和

onMouseOut

分别暂停和启动计时器。当然，您必须将它们传递给

Snack

组件，并在DOM节点上设置它们

const timer=useRef（null）；
常量ClearNackTimer=（）=>clearTimeout（timer.current）；
const startSnackTimer=（）=>timer.current=setTimeout（（）=>setShowSnack（false），1000）；
常量切换=（）=>{
设置show零食（！show零食）；
startSnackTimer（）；
};
返回(
切换
);

---

“淡出”转换仍然有些问题，但我认为这解决了暂停隐藏悬停状态下的snackbar的问题，如果这是您的意图。

我相信您可能会将CSS动画在snackbar中淡出与snackbar本身的显示和隐藏混为一谈。您可以使用

onMouseOver

和

onMouseOut

分别暂停和启动计时器。当然，您必须将它们传递给

Snack

组件，并在DOM节点上设置它们

const timer=useRef（null）；
常量ClearNackTimer=（）=>clearTimeout（timer.current）；
const startSnackTimer=（）=>timer.current=setTimeout（（）=>setShowSnack（false），1000）；
常量切换=（）=>{
设置show零食（！show零食）；
startSnackTimer（）；
};
返回(
切换
);

---

“淡出”转换仍然有一些问题，但我认为这解决了暂停隐藏悬停状态下的snackbar的问题，如果这是您的意图的话。

解决这个问题的一种方法是使用事件而不是计时器。我建议使用这种方法而不是计时器，因为您可以通过css控制所有计时，并且组件会在动画完成时做出反应

<Snack
  show={showSnack}
  onAnimationEnd={(e) => {
    setShowSnack(false)
  }}
/>

const Snack = ({ show, onAnimationEnd }) => {
  return (
    <div
      className={`my-snack ${show ? 'show' : ''}`}
      onAnimationEnd={(e) => {
        if (e.animationName === 'fadeout') {
          onAnimationEnd(e)
        }
      }}>
      My Snackbar
    </div>
  )
}

{
设置显示（假）
}}
/>
常量零食=（{show，onAnimationEnd}）=>{
返回(
{
如果（例如animationName==='fadeout'）{
onAnimationEnd（e）
}
}}>
我的小吃吧
)
}

关于这种特定方法（针对您的用例）的一个注意事项是，您必须知道js中的动画名称，因为您同时使用多个动画。e、 g.

（例如animationName===='fadeout'）

---

示例：

解决此问题的一种方法是使用事件而不是计时器。我建议使用这种方法而不是计时器，因为您可以通过css控制所有计时，并且组件会在动画完成时做出反应

<Snack
  show={showSnack}
  onAnimationEnd={(e) => {
    setShowSnack(false)
  }}
/>

const Snack = ({ show, onAnimationEnd }) => {
  return (
    <div
      className={`my-snack ${show ? 'show' : ''}`}
      onAnimationEnd={(e) => {
        if (e.animationName === 'fadeout') {
          onAnimationEnd(e)
        }
      }}>
      My Snackbar
    </div>
  )
}

{
设置显示（假）
}}
/>
常量零食=（{show，onAnimationEnd}）=>{
返回(
{
如果（例如animationName==='fadeout'）{
onAnimationEnd（e）
}
}}>
我的小吃吧
)
}

关于这种特定方法（针对您的用例）的一个注意事项是，您必须知道js中的动画名称，因为您同时使用多个动画。e、 g.

（例如animationName===='fadeout'）

---

示例：

动画播放状态：暂停暂停–您只需暂停一个
，淡入/淡出动画将在悬停时暂停。如果目标是阻止snackbar在悬停时隐藏，这仍然不起作用，因为您总是使用
切换来无条件隐藏snackbar。解决此问题的一种方法是使用
onAnimationEnd
事件而不是计时器。我建议使用这种方法而不是计时器，因为您可以通过css控制所有计时，并且组件会在动画完成时做出反应。关于这种特定方法（针对您的用例）的一个注意事项是，您必须知道js中的动画名称，因为您同时使用多个动画。e、 g.
（e.animationName==='fadeout'）
@DennisMartinez-如果您在下面添加此作为答案，我将很高兴地接受它：-）
动画播放状态：暂停–您只需暂停一个
，淡入/淡出动画将在悬停时暂停。如果目标是阻止snackbar在悬停时隐藏，这仍然不起作用，因为您总是使用
切换来无条件隐藏snackbar。解决此问题的一种方法是使用
onAnimationEnd
事件而不是计时器。我建议使用这种方法而不是计时器，因为您可以通过css控制所有计时，并且组件会在动画完成时做出反应。关于这种特定方法（针对您的用例）的一个注意事项是，您必须知道js中的动画名称，因为您同时使用多个动画。e、 g.
（e.animationName==='fadeout'）
@DennisMartinez-如果您将此添加为下面的答案，我将很乐意接受：-）谢谢您的帮助。我将遵循@DennisMartinez在原始问题评论中首先提出的建议，即使用
onAnimationEnd
而不是
setTimeout
解决方案。感谢您的帮助。我将遵循@DennisMartinez在原始问题的评论中首先提出的建议，即使用
onAnimationEnd
而不是
setTimeout
解决方案。感谢您在@Dennis中发布答案-是否可以在snackbar中添加一个按钮以尽早取消它？@physicsboy您肯定可以这样做。这超出了这个问题的范围，所以我建议针对这个特殊问题问一个新问题