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并调整sample_file.csv.gz以使其偏移。将stroke-dashoffset应用于transition，就像stroke-dashoffset一样。从transition: stroke-dashoffset 250ms ease-in-out开始并处于按钮活动状态，将其设置为stroke-dashoffset: 20

样式化的组件播放动画onClick

1 个答案: