стилизованные компоненты воспроизводят анимацию onClick - PullRequest
Новая
       16

стилизованные компоненты воспроизводят анимацию onClick

1 голос
/ 17 января 2020

РЕДАКТИРОВАТЬ: это моя последняя попытка 

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).

1 Ответ

1 голос
/ 17 января 2020

Что вы обычно делаете для анимации простой линии SVG - это установите stroke-dasharray и отрегулируйте stroke-dashoffset, чтобы сместить его. Применить transition к stroke-dashoffset как transition: stroke-dashoffset 250ms ease-in-out. Начните с stroke-dashoffset: 20 и при активном состоянии кнопки установите его на stroke-dashoffset: 0

...