React组件中CSS-in-JS动画无法生效问题咨询

问题原因 #

你当前的写法错误在于直接将Emotion的keyframes对象通过React的style属性传递。React内联style只支持标准CSS属性值，而Emotion的keyframes返回的是一个特殊对象，拼接成字符串后会变成[object Object]，浏览器无法识别这个无效的动画名称，导致动画不生效。

解决方案 #

方案1：使用Emotion的css函数与css属性 #

修改Styles.js，用css函数包裹样式对象：

import { keyframes, css } from '@emotion/react';

const bounceAnimation = keyframes`
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
`;

const classes = {
  loadingContainer: css({
    fontSize: '84px',
    fontWeight: 800,
    textAlign: 'center',
  }),
  loadingSpan: css({
    display: 'inline-block',
    animation: `${bounceAnimation} 0.7s infinite`,
    color: 'red',
    margin: '0 -.05em',
  }),
};

export default classes;

然后在组件中使用Emotion的css属性（需确保项目已配置支持Emotion的css prop，比如通过babel插件）：

import React from 'react';
import styles from './styles';

const Loader = () => {
  return (
    <div css={styles.loadingContainer}>
      <span css={styles.loadingSpan}>loading</span>
    </div>
  );
};

export default Loader;

方案2：使用Emotion的Styled组件 #

改用Styled组件写法，这是Emotion推荐的方式之一：
修改Styles.js为Styled组件：

import { keyframes, styled } from '@emotion/react';

const bounceAnimation = keyframes`
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
`;

export const LoadingContainer = styled.div`
  font-size: 84px;
  font-weight: 800;
  text-align: center;
`;

export const LoadingSpan = styled.span`
  display: inline-block;
  animation: ${bounceAnimation} 0.7s infinite;
  color: red;
  margin: 0 -.05em;
`;

组件中直接使用定义好的Styled组件：

import React from 'react';
import { LoadingContainer, LoadingSpan } from './styles';

const Loader = () => {
  return (
    <LoadingContainer>
      <LoadingSpan>loading</LoadingSpan>
    </LoadingContainer>
  );
};

export default Loader;

内容的提问来源于stack exchange，提问作者PageSource