javascript - 样式化的组件在点击时播放动画

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）。

标签： javascriptcssreactjsecmascript-6styled-components

Answer 1

What you do normally to animate a simple line SVG is to set the stroke-dasharray and adjust the stroke-dashoffset to offset it. Apply transition to stroke-dashoffset like transition: stroke-dashoffset 250ms ease-in-out. Start off with stroke-dashoffset: 20 and on button active state, set it to stroke-dashoffset: 0