动画在使用 {keyframes} 的样式组件中不起作用答案

【问题标题】：Animation not working in styled-component using {keyframes}动画在使用 {keyframes} 的样式组件中不起作用
【发布时间】：2021-01-13 02:45:20
【问题描述】：

我有一个基本组件 - Emoji.jsx

import styled from 'styled-components';

const StyledEmoji = styled.div`
    font-size: 6rem;
    cursor: pointer;
    &:not(:last-child) {
        margin-right: 3rem;
    }
`;

function Emoji({ content, handleClick }) {
    return (
        <StyledEmoji onClick={() => handleClick(content)}>{content}</StyledEmoji>
    );
}

export default Emoji;

我正在扩展这个组件并在 EmojiBubble.jsx 中对其应用动画

import Emoji from './Emoji';
import styled, { keyframes } from 'styled-components';

const Bubble = keyframes`
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
`;

const EmojiBubble = styled(Emoji)`
    animation: ${Bubble} 6s ease-in-out;
`;

export default EmojiBubble;

但是，当我使用 EmojiBubble 组件时，动画不起作用

<EmojiBubble content={emoji} /> //Emoji not rotating

这里有什么问题？

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

function Emoji({ content, handleClick })... 不会将类名传递给StyledEmoji，这就是不应用EmojiBubble 创建的样式的原因。所有你需要做的：传递类名：

function Emoji({ content, handleClick, className }) {
  return (
    <StyledEmoji className={className} onClick={() => handleClick(content)}>
      {content}
    </StyledEmoji>
  );
}

Working example

【讨论】：