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）Optionnal：要实际看到动画从-3.125em变为3em，您需要从justify-content:center; css声明中删除HomeDiv。否则，您会看到动画从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>
);

这里是live example

如何在React中使用样式化的组件以获得关键帧动画

1 个答案: