如何延迟悬停效果与css反应？

Question

我想使用反应钩子为我的画廊创建某种悬停动画，但到目前为止我还没有成功。

目标说明：

我想实现，当我将鼠标悬停在具有叠加层的图像上时 - 它会首先在图像下显示文本，一段时间后文本会消失并且图像将删除叠加层 - 基本上它会亮起起来。

到目前为止我做了什么：

我在图像上创建了一些叠加层，在 CSS 的帮助下悬停时会消失。

       <Col
          xs={6}
          className="img-wrap"
          onClick={() => setSelectedData(post)}
          onMouseEnter={handleMouseEnter}
        >
          <img src={post.image} alt="random" />
          <div className="overlay">
            <div className="text">{post.name}</div>
          </div>
          {hover && selectedData === post && <h1>HOVER </h1>}
        </Col>

还有 CSS：

.img-wrap {
  position: relative;
}

image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 210px;
  opacity: 0.5;
  transition: 0.5s ease;
  background-color: black;
}

.img-wrap:hover .overlay {
  opacity: 0;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

这很好用，但是悬停效果会立即触发，而不是像我希望的那样一段时间，并且悬停时不会显示文本而是onClick。

我认为最好是使用 setTime() 函数，但我不知道如何将它与 css 连接。'

这是我的沙盒：

https://codesandbox.io/s/inspiring-poitras-5y3b1?file=/src/App.js

Answer 1

或者通过延迟动画 css opacity 属性，则不需要超时。

.img-wrap .overlay {
  opacity: 1;
  transition: opacity 2s linear 1s; // where 1s is your delay
}

img-wrap:hover .overlay {
  opacity: 0;
  transition: opacity 2s linear 1s; // where 1s is your delay
}

更多关于转换属性的信息在这里：https://www.w3schools.com/css/css3_transitions.asp

Answer 2

我删除了 onClick，将 setSelectedData 放在 onMouseEnter 中，在其中添加了一个 setTimeout，并将您的 setHover 置于超时中。我不是特别喜欢使用 setTimeouts，但这是一种快速的方法来做你正在寻找的事情。

<Col
    xs={6}
    className="img-wrap"
    onMouseEnter={() => {
       setSelectedData(post);
       setTimeout(() => {
           setHover(true);
       }, 1000);
    }}
    onMouseLeave={() => setHover(false)}
 >

在 css 中我们需要去掉 :hover 伪选择器，并添加一个类：

.img-wrap .overlay.fade {
  opacity: 0;
}

然后在叠加层上，我们需要使淡入淡出类有条件：

<div className={"overlay" + (hover && post === selectedData ? " fade" : "")}>

https://codesandbox.io/s/quizzical-mayer-0si2d?file=/src/App.js:506-731