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

【问题标题】：How to disable initial hover transition on mount in React?如何在 React 中禁用挂载时的初始悬停过渡？
【发布时间】：2020-02-16 18:34:55
【问题描述】：

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

反应：

...

{ 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

如何禁用这种初始转换？在demo中，图标在点击后不应该收缩和扩大。

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

【问题讨论】：

您是否尝试过使用unset，可能使用!important 作为属性值？我知道这不是最佳实践，但不修改核心文件，它可能是你的工作。例如：transform: unset !important;
@dmanexe 你的意思是在初始类中添加它？

标签： javascript html css reactjs animation

【解决方案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

谢谢

【讨论】：