styled-components 切换重启动画答案

【问题标题】：styled-components Toggle-Restart animationstyled-components 切换重启动画
【发布时间】：2021-05-12 23:11:53
【问题描述】：

我有一个放大镜图标，我想用一个 css 一次性动画来摆动它。但是它只在第一次起作用。

const IconSearch = styled.span`
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  width: 100%;
  height: 100%;
  display: inline-block;
  color: ${({ theme }) => theme.color.sidebar.search.box.icon};
  font-size: 24px;
  line-height: 48px;
  font-family: "${({ theme }) => theme.font.icon}";
  font-weight: 700;
  &::before {
    content: "\f002";
  }
  &.a {
    animation: wiggle 0.85s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  }
`;

当this.props.wiggle为true时启动。

<IconSearch className={!this.props.wiggle ? "" : "a"}></IconSearch>

我尝试切换它的方式是这样的（Redux Slice reducer）：

searchWiggle: (search) => {
  if (search.wiggle) {
    search.wiggle = false;
    search.wiggle = true;
  } else {
    search.wiggle = true;
  }
},

但是状态更新太快，第一次之后动画没有运行。

如何重置动画，以便在每次更新 search.wiggle 时运行？

【问题讨论】：

标签： css reactjs redux react-redux styled-components

【解决方案1】：

您可以使用带有 search.wiggle 值的 key 属性（告诉 React 重新渲染组件）。 (Cf similar issue here)

【讨论】：