css - React 在鼠标悬停时添加图像，平滑过渡

Question

问题描述

我试图找到一种方法，每当鼠标进入 div 时，图像就会逐渐出现，而当鼠标离开时，图像也会慢慢消失。

function App() {
    const imagePath = 'https://via.placeholder.com/100';
    const [showImage, setShowImage] = React.useState(false);

    return (
       <div className="container"
            onMouseEnter={() => setShowImage(true)}
            onMouseLeave={() => setShowImage(false)}
            style={ {backgroundImage: showImage ? `url(${imagePath})` : `none` }}>
        
       </div>
    )
}

ReactDOM.render(<App />, document.querySelector("#app"));

.container{
   background-color: orange;
   width: 100px;
   height: 100px;
   animation-duration: 0.75s;
   transition: all 0.5s;
}

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

---

我尝试过的

• 我尝试将 all 前缀添加到 css 中的过渡属性中，但这不起作用。
• 我尝试在网上寻找解决方案，但似乎找不到解决方法，这让我认为如果涉及图像出现/消失，则有一种特殊的方法可以实现此目的。

有人知道我该如何解决这个问题吗？

Answer 1

我刚刚更改了 div background-image要添加的属性<img> div 内的标签和标签上定义的过渡，默认状态为 false，因此在 mouseenter 状态后不透明度为 0(零) true然后opacity:1 .

希望下面的代码片段能够对您有所帮助。

function App() {
    const imagePath = 'https://via.placeholder.com/100';
    const [showImage, setShowImage] = React.useState(false);

    return (
        <div className="container"
            onMouseEnter={() => setShowImage(true)}
            onMouseLeave={() => setShowImage(false)}>
            <img src={imagePath} alt="hover image" style={{ opacity: showImage ? 1 : 0 }}/>
        </div>
    )
}

ReactDOM.render(<App />, document.querySelector("#app"));

.container{
   background-color: orange;
   width: 100px;
   height: 100px;
   position: relative;
}
.container img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    left: 0;
    top: 0;
    transition: 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<div id="app"></div>