Блог

Главная - Вопросы по программированию - Анимация не работает в стилизованном компоненте с использованием {ключевых кадров}

Анимация не работает в стилизованном компоненте с использованием {ключевых кадров}

#reactjs #styled-components

#reactjs #стилизованные компоненты

Вопрос:

У меня есть базовый компонент — Emoji.jsx

 import styled from 'styled-components';

const StyledEmoji = styled.div`
    font-size: 6rem;
    cursor: pointer;
    amp;: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

В чем проблема?

Ответ №1:

function Emoji({ content, handleClick })... не передает имя класса StyledEmoji , поэтому стили, созданные с помощью EmojiBubble , не применяются. Все, что вам нужно сделать: передать имя класса:

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

Рабочий пример