如何延迟悬停效果以响应 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

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

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

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

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

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

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

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

Answer 2

或者通过延迟设置 css 不透明度属性的动画，就不需要超时了。

.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

如何延迟悬停效果以响应 css？

How to delay on hover effect in react with css?

javascript

css

styles

reactjs

react-hooks