Как запустить анимацию в синхронном стиле в styled-components - PullRequest
Новая
       17

Как запустить анимацию в синхронном стиле в styled-components

0 голосов
/ 26 мая 2020

У меня есть следующий код 

:first-child {
transition: all 0.2s linear;
      transform: ${({ open }) =>
        open
          ? '  translateY(7.5px) rotate(45deg)'
          : '  rotate(0deg) translateY(0px)'};
    }

Как я могу убедиться, что translateY полностью завершает работу, прежде чем выполнять преобразование поворота?

1 Ответ

1 голос
/ 26 мая 2020

Я думаю, что лучший способ добиться того, что вам нужно, - это использовать css ключевые кадры : 

import { css, keyframes } from 'styled-components';

const openKeyframe = keyframes`
  50% {
    transform: translateY(7.5px) rotate(0);
  }
  100% {
    transform: translateY(7.5px) rotate(45deg);
  }
`;

const openAnimation = css`
  animation: 1s linear ${openKeyframe} forwards;
`;

const Component = styled.div`
  :first-child {
    ${({ open }) => open && openAnimation}
  }
`;

forwards ключевое слово сохранит ваш компонент в конечном состоянии анимации когда он будет закончен, что, я полагаю, это то, что вы ищете, если вам нужно сохранить состояние open.

...