如何在 React 中使用樣式化組件來獲取關鍵幀動畫

Question

我是 React 的新手，特別是嘗試使用樣式化的組件和關鍵幀。

我正在嘗試讓主頁 header h1 滑入。

我遵循了一些文檔，但我覺得缺少某些東西或者我有問題。

這是代碼：

//首頁.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;

任何有助於理解如何讓關鍵幀和 animation 工作的幫助都會非常有幫助。

Answer 1

有幾件事是錯誤的：

1. 您實際上並沒有使用styled-component創建的組件。 當你這樣做

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

你剛剛創建了一個新的 React 組件，你可以在任何渲染方法中使用它。 所以你的Home組件變成了我大寫的（react 期望自定義組件是大寫的）並重命名了一些組件以避免重復變量）：

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

2. 要為top屬性設置動畫，您需要將初始top信息添加到 Header。 此外，我認為您不想在h1上應用 animation 所以我將其刪除

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

3. 可選：要實際看到 animation 從 -3.125em 變為 3em，您需要刪除justify-content:center; 來自HomeDiv 8CBA22E28EB17B5F5C6AE2A266AZ 聲明。 否則，你會看到一個 animation 從 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>
);

這是一個活生生的例子