如何在 ReactJs 中单击汉堡包项目时进行 css 图像源转换？

Question

我有一个汉堡包图标，点击它，图像就会改变。我需要在图像上显示过渡。

代码如下所示::

const [isOpen, setIsOpen] = useState(false);

function handleClck = () => {
 setIsOpen(true);
}
function getImage = () => {
  isOpen ? <img src={url1} className="xxxxxuxu" /> : <img src={url2} className="yyyyyyyy" /> ;
}

<div class="nav">
      <div class="hamburger" onClick={handleClck}></div>
      {getImage()}
</div>

我想显示图像变化之间的 css 过渡。我该怎么做？

Answer 1

虽然图像不能像您所寻求的那样动画化，但我们可以使用 hack。技巧是 - 在图像更改时添加淡入淡出的动画。

在下面的代码片段中，有一个效果示例 -

setTimeout(function(){
  document.querySelector(".img1").classList.add("t1");
document.querySelector(".img1").src="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80";
}, 2000);

.img1{
  height: 150px;
  width: 150px;
}

@keyframes fade{ /*The animation*/
  0%{
    opacity: 1;
  }
  50%{
    opacity: 0.1;
  }
  100%{
    opacity: 1;
  }
}

.t1{ /*The class which has animation*/
  animation: fade 1 2s; /*Animation will only run once*/
}

<img src="https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img1" />

以上片段中的大部分代码仅用于演示目的，但在您的应用中，您可以在更改图像时添加 class -

function getImage = () => {
  isOpen ? <img src={url1} className="t1" /> : <img src={url2} className="t1" /> ;
}

其中 t1 是附加了动画的 css class。

虽然我不是 React 专家，但我相信代码也应该适用于您的 React 应用程序。

如何在 ReactJs 中单击汉堡包项目时进行 css 图像源转换？

How to make an css image source transition on clicking on a hamburger item in ReactJs?

javascript

css

css-transitions

reactjs