动画不适用于情感库

Question

相关代码：

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 不工作。

Answer 1

问题是您没有正确分配动画 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>
  ...

这是一个有效的 codesandbox

动画不适用于情感库

Animations not working with Emotion Library

emotion

reactjs