Как использовать стилизованные компоненты в React для получения анимации ключевых кадров

Question

Я новичок в React и специально пытаюсь использовать стилизованные компоненты и ключевые кадры.

Я пытаюсь вставить заголовок главной страницы h1.

Я проследил за некоторыми документами, но чувствую, что чего-то не хватает или что я вышел из строя.

Вот код:

// Home.js

import React from "react";
import styled, { keyframes } from 'styled-components';


const Heading = keyframes`
  0% { top: -3.125em; }
  100% { top: 3em;
`;

const home = styled.div`
    min-height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    color: white;
`;

const homeHeader = styled.div`
  h1 {
    font-weight: lighter;
    animation: Heading;
    animation-duration: 3s;
    animation-fill-mode: forwards;
  }

  // Animation
  animation: ${Heading}
  animation-duration: 3s;
  animation-fill-mode: forwards;
`;

export const Home = () => (
    <div className="home">
      <header className="homeHeader">
        <h1>Welcome to Freight Mule</h1>
      </header>
    </div>
);

export default Home;

Любая помощь в понимании того, как заставить работать ключевой кадр и анимацию, была бы очень полезна.

Answer 1

Некоторые вещи неправильны:

1) Вы фактически не используете компонент, созданный styled-component.Когда вы делаете

const Div = styled.div`
  background-color: blue;
`

, вы только что создали новый компонент React, который вы можете использовать в любом методе рендеринга.Таким образом, ваш Home компонент становится тем, что я перевернул (реакция ожидает, что пользовательские компоненты будут в верхнем регистре) и немного переименовал компоненты, чтобы избежать дублирования переменных):

const Home = () => (
  <HomeDiv>
    <HomeHeader>
      <h1>Welcome to Freight Mule</h1>
    </HomeHeader>
  </HomeDiv>
);

2) Чтобы анимировать свойство top,вам нужно добавить начальную top информацию в заголовок.Кроме того, я думаю, что вы не хотели применять анимацию на h1, поэтому я удалил на

const HomeHeader = styled.div`
  h1 {
    font-weight: lighter;
  }
  position: relative;
  top: 0;
  animation: ${Heading};
  animation-duration: 3s;
  animation-fill-mode: forwards;
`;

3) Необязательно: Чтобы увидеть, как анимация движется от -3.125em к 3em, вам нужноудалить justify-content:center; из декларации HomeDiv css.В противном случае вы увидите анимацию, идущую от центра div к 3em.

Здесь полный код:

const Heading = keyframes`
  0% { top: -3.125em; }
  100% { top: 3em;}
`;

const HomeDiv = styled.div`
  min-height: 95vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.5em;
`;

const HomeHeader = styled.div`
  h1 {
    font-weight: lighter;
  }
  position: relative;
  top: 0;
  animation: ${Heading};
  animation-duration: 3s;
  animation-fill-mode: forwards;
`;

const Home = () => (
  <HomeDiv>
    <HomeHeader>
      <h1>Welcome to Freight Mule</h1>
    </HomeHeader>
  </HomeDiv>
);

А вот живой пример