时间戳

首页 > 解决方案 > styled-components 切换重启动画

css - styled-components 切换重启动画

问题描述

我有一个放大镜图标，我想用一个 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更新时运行？

标签： cssreactjsreduxreact-reduxstyled-components

解决方案

你可以使用key带有 search.wiggle 值的 prop（告诉 React 重新渲染组件）。（参见这里的类似问题）

推荐阅读