Анимации не работают с Emotion Library - PullRequest
Новая
       4

Анимации не работают с Emotion Library

0 голосов
/ 12 февраля 2020

Соответствующий код: 

const fadeInRight = keyframes`
    from {
        opacity:0;
        transform: translatex(-200px);
    }
    to {
        opacity:1;
        transform: translatex(0);
    }
`;
const bubbleFadeRight = css`
  animation: ${fadeInRight} 2s infinite;
`;

//check condition and set bubbleFade = bubbleFadeLeft or bubbleFadeRight
const bubbleFade = { bubbleFadeRight };

function App() {
  return (
    <div>
      {/* Not working: */}
      <div css={bubbleFade}>I blink!</div>

      {/* Working: */}
      <div
        css={css`
        // animation: ${bubbleFade}
      `}
      >
        I blink!
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Воспроизведение: https://codesandbox.io/s/dawn-rain-46ocm

Описание проблемы: Я не знаю, почему, когда я использую вариант 2, он работает, но случай 1 не вызывает проблем.

1 Ответ

0 голосов
/ 12 февраля 2020

Проблема в том, что вы не назначаете атрибут анимации CSS должным образом, вам не нужно переопределять атрибут css: 

    ...
    <div
     css={css`
     // animation: ${bubbleFade}
     `}
    >
    ...

, просто назначьте его напрямую, так как у вас есть bubbleFadeLeft и bubbleFadeRight как CSS переменные

вот так: 

  ...
  <div css={bubbleFadeLeft}>Case 1: I blink but not working!</div>
  <div css={bubbleFadeRight}>Case 2: I blink!</div>
  ...

Вот рабочая коды и коробка

...