javascript - 如何在 React 中禁用挂载时的初始悬停过渡？

Question

想象一下，悬停时放大图片，不悬停时缩小图片。如果安装时光标恰好位于图片内部，则会播放缩放过渡。

react :

...

{ visible ? 
    <IconVisible 
      className="icon"
      onClick={handleOnClick}
    />
  :
    <IconMasked 
      className="icon"
      onClick={handleOnClick}
    />
}

...

CSS:

.icon {
  transition: transform 0.3s ease-in-out;
  transform: scale(1)
}

.icon:hover {
  transition: transform 0.3s ease-in-out;
  transform: scale(1.5)
}

查看 the demo

如何禁用这种初始转换？在演示中，图标在单击后不应收缩和展开。

一种方法是创建一个与放大版本相同的特殊类(与 .icon:hover 相同)并最初添加此类，然后在 useEffect 中删除此类。缺点是它需要两次渲染，杂乱且过于复杂。有更简单的解决方案吗？

Answer 1

也许你需要在图标内输入鼠标时放大，但是当点击图标时也出现意想不到的动画(先缩小再放大)。原因是 React:

1) 当 Visible 为真时显示第一个图标，否则显示第二个图标2) 在 React DOM 中第一次渲染图标并更改此渲染的图标，它是一个新图标，因此动画重复。

解决方案:1) 你为这个图标创建一个包装器2) 在包装器中实现动画

你可以按照这里的代码

<div className="icon">
    {visible ? (
      <IconVisible onClick={handleOnClick} />
    ) : (
      <IconMasked onClick={handleOnClick} />
    )}
</div>

CSS

.icon {
  width: 100px;
  height: 100px;
  margin: 100px;
  font-size: 80px;
  line-height: 100px;
  text-align: center;
  transition: transform 0.3s ease-in-out;
  transform: scale(1);
}

.icon:hover {
  transition: transform 0.3s ease-in-out;
  transform: scale(1.5);
}

您也可以点击链接:https://codesandbox.io/s/react-mount-initial-hover-problem-eds9g

谢谢