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 中的转换属性，但没有成功。
我试着在网上寻找解决方案，但我似乎无法找到解决方法，这让我觉得如果涉及图像，有一种特殊的方法可以实现它 appearing/disappearing。

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

Answer 1

这里不需要javascript。只需添加一个 img 标签，而不是在悬停时添加背景，只需更改它的不透明度，css 过渡就可以了。

Answer 2

我刚刚更改了 div background-image 属性以在 div 内添加 <img> 标签，并在标签上定义了转换，默认状态为 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>

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

React add image on mouse hover, smooth transition

css

css-transitions

reactjs

问题描述

我试过的