带样式的组件在单击时播放动画

Question

编辑：这是我最后一次尝试

const PathAnimate = styled.polyline(props.active => ({
 fill: transparent;
 stroke: #53bf8b;
 stroke-width: 2;
 stroke-dasharray: 25;
 stroke-dashoffset: 0;
 stroke-linecap: round;
 stroke-linejoin: round;
 animation: ${animate} 350ms cubic-bezier(0, 0, 0.32, -0.13);
}))

我有一个 Wrapper 组件，它有我的按钮和一个 SVG 元素，我想在单击它时设置动画。

我的按钮动画效果很好，但我不确定如何为我的 SVG 制作动画

<Wrapper active={questionChoice.id === id}>
            <Button
              type="button"
              key={questionChoice.id}
              onClick={() => {
                const answer = { id: questionChoice.id, value: questionChoice.value }
                updateCurrent(answer)
                submitAnswer()
              }}
            >
              {questionChoice.text}
            </Button>
            <div className="svg-wrapper">
              <svg className="svg" version="1.1" id="tick" viewBox="6 5 26 26">
                <polyline
                  className="path"
                  points="
          11.6,20 15.9,24.2 26.4,13.8 "
                />
              </svg>
            </div>
          </Wrapper>

这是CSS

const Wrapper = styled.div`
  .svg-wrapper {
    margin-left: 1rem;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .svg {
    width: 20px;
  }
  .path {
    fill: transparent;
    stroke: #53bf8b;
    stroke-width: 2;
    stroke-dasharray: 25;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: ${animate} 1s cubic-bezier(0, 0, 0.32, -0.13);
    /* animation: ${props =>
      props.active ? '${animate} 1s cubic-bezier(0, 0, 0.32, -0.13)' : 'none'}; */
  }
  ${Button} {
    background-color: ${props => (props.active ? '#C4E8C5' : 'white')};
    opacity: ${props => (props.active ? 1 : 0.45)};
    transition: background 250ms ease-in-out, transform 150ms ease;
    &:hover {
      opacity: 1;
      border-color: #c4e8c5;
      border-width: 2px;
      transform: scale(1.15);
    }
  }

现在动画正在页面加载时播放，但我希望它的工作方式与 Button 相同（基于 props.active）。

Answer 1

通常为简单线条 SVG 设置动画的做法是设置 stroke-dasharray 并调整 stroke-dashoffset 以抵消它。像 transition: stroke-dashoffset 250ms ease-in-out 一样将 transition 应用于 stroke-dashoffset。从 stroke-dashoffset: 20 开始，在按钮活动状态下，将其设置为 stroke-dashoffset: 0

带样式的组件在单击时播放动画

styled components play animation onClick

javascript

css

ecmascript-6

reactjs

styled-components