В чем разница между «styled.div» и «ключевыми кадрами» для стилизованных компонентов?

Question

У меня сейчас проблема с ключевыми кадрами для стилизованных компонентов.Я пришел к пониманию того, как использовать реквизиты в «styled.div», но я не смог использовать реквизиты в компоненте «ключевые кадры».

Я знаю, что следующий пример является немного базовым, ноэто ясно из того, что я пытаюсь сделать.Что не так с версией 'ключевых кадров' здесь:

const HomePageDiv = styled.div`
    background: ${(props) => `red`};
`;

const backgroundChange = keyframes`
    0%{
        background: ${(props) => `blue`};
    }
`;

Здесь компонент 'styled.div' будет отображать красный фон, но если я включу анимацию ключевых кадров, она полностью игнорируется.С другой стороны, если бы я включил следующую анимацию ключевых кадров:

const backgroundChange = keyframes`
    0%{
        background: blue;
    }
`;

, у меня было бы идеальное затухание от синего до красного.Это привело меня к мысли, что компоненты keyframes и styled.div имеют разный синтаксис для использования реквизита.Может ли кто-нибудь помочь мне понять разницу?

Answer 1

Я наконец нашел решение своего вопроса.Решение Мэтью Барбары не сработало для меня, я не уверен почему, но я нашел решение в билете 397 .

Вот как я применил решение к своему собственному коду:

import styled, {keyframes} from 'styled-components';

const backgroundChange = (props) => keyframes`
    0%{
        background: ${props.color1};
    }
`;

const HomePageDiv = styled.div`
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    position: absolute;
    overflow: hidden;
    animation: ${backgroundChange} 2s linear forwards 1;
`;

export default HomePageDiv;

Это правильно передаст реквизиты в ключевые кадры, для использования этих реквизитов потребуется стандартное обозначение $ {}.Эти реквизиты должны быть переданы через ваш компонент, и, конечно, имя переменной ключевых кадров должно быть передано в вашу анимацию.

Answer 2

Чтобы получить доступ к реквизитам в ключевых кадрах, вам нужно передать keyframe реквизит вашему компоненту.

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

const rotate = keyframes`
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(${props => props.rotation || '360deg'});
  }
`

const RotatingBox = styled.div`
  animation: ${rotate} 10s linear infinite;
`

// Usage:

<RotatingBox rotation="180deg" />

Эта «проблема» была выделена в заявке 397