React-Emotion - анимация div с помощью EmotionJS

Question

Мне нужна помощь с анимацией моего div.Я использую Emotion-JS для React .

Я не думаю, что анимация работает.Ниже мой компонент.

Спасибо

Answer 1

Помните о подсказках @ Powell_v2 выше, это правильно!

Однако для вашего случая вам даже не нужно использовать анимацию и ключевые кадры.Просто используйте transition.

длительность перехода: 10 с;

свойство перехода: ширина;

        <div
          className={css`
            position: absolute;
            left: 0;
            top: 10vh;
            width: ${this.state.open ? "80vw" : "10vw"};
            height: 8vh;
            background-color: black;
            z-index: 999;
            border-radius: 0px 10px 10px 0px;
            transition-duration: 10s;
            transition-property: width;
          `}
        />
    ```

Answer 2

Посмотрев на приведенный пример, необходимо настроить несколько вещей:

• Рекомендуется использовать @emotion/core с React ( ref в документах )
• css функция не возвращает вычисленную строку имени класса - стили должны быть установлены с помощью css prop ( ref в документах )
• Похоже, вы получили @keyframesнеправильно - прочитайте это на MDN , чтобы лучше понять.

Надеюсь, что это поможет вам.