我是 React 的新手，专门尝试使用样式化组件和关键帧。

我试图让主页标题 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;

在理解如何让关键帧和动画工作方面的任何帮助都会非常有帮助。

#1楼 票数：1

有几件事是错误的：

  1. 您实际上并未使用由styled-component创建styled-component 。 当你做
const Div = styled.div`
  background-color: blue;
`

你刚刚创建了一个新的 React 组件，你可以在任何渲染方法中使用它。 所以你的Home组件变成了我大写的（反应期望自定义组件大写）并重命名一些组件以避免重复变量）：

const Home = () => (
  <HomeDiv>
    <HomeHeader>
      <h1>Welcome to Freight Mule</h1>
    </HomeHeader>
  </HomeDiv>
);
  1. 要为top属性设置动画，您需要向 Header 添加初始top信息。 此外，我认为您不想在h1上应用动画，所以我将其删除
const HomeHeader = styled.div`
  h1 {
    font-weight: lighter;
  }
  position: relative;
  top: 0;
  animation: ${Heading};
  animation-duration: 3s;
  animation-fill-mode: forwards;
`;
  1. 可选：要实际看到从 -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>
);

这是一个活生生的例子

  ask by RJorns translate from so

未解决问题？本站智能推荐：

2回复

如何在 React 样式组件关键帧内使用媒体查询？

我可以让媒体查询在常规styled-components组件中正常工作，但是当我尝试在keyframe使用它时（通过从styled-components导入）它似乎根本不起作用。 试图让 div 动画到特定位置，但是当窗口 < 800px 时改变结束位置，我尝试过： 我还尝试将媒体查询放
1回复

动画在 React 16.13.1 中的父组件之外不起作用

我面临一个问题，如果我将我的子组件与主组件分开，我的关键帧动画就会停止工作。 有问题的动画是一个简单的扩展容器，每次容器的内容发生变化时都会播放。 我的 Abouts.js（主要组件）： 我的styles.js（样式组件文件）： 现在，一切正常，并且按预期运行。 问题是，当我将子 ( T
2回复

Styled-Components - 将道具/主题传递给关键帧？

尝试一些带有样式组件和关键帧的东西。 这是关于动画文本颜色。 它在使用十六进制代码或 css 颜色名称时确实有效。 但是，我想使用我在主题中定义的颜色。 不过好像没用？ 我如何在这里使用道具？
1回复

如何创建自动播放徽标轮播？

我在创建无限自动播放徽标轮播时遇到了麻烦。 我想在 React 项目中创建轮播。 我认为有两种方法可以创建它。 一种使用JavaScript 。 第二只使用CSS 。 我如何实现这一目标？ 注意：我正在使用样式组件。 此外，作为标志的SVG包含大量数据，例如我将其留空。
1回复

动态创建的 React 样式组件

我是 React 样式组件的新手，我在动态创建时钟时遇到了麻烦，时钟的初始度为分钟（分度），初始度为小时（ hourDegrees ）。 到目前为止，这是我所取得的成就，但我收到以下消息： Keyframes.js:20 已动态创建id为“...”的组件styled.div。 您可能会看到此
1回复

排序CSS关键帧动画不起作用

我正在测试一些具有delay属性的CSS动画的序列。 它似乎不起作用。 延迟不匹配。 我不确定自己可能做错了什么。 有人可以帮忙吗？ 这是我的代码笔： http : //codepen.io/marineb/pen/RramrJ?editors=110 。 （此代码笔已用解决方案
5回复

如何获得工作关键帧动画？

我正在尝试将动画制作为涟漪效果。 它似乎在 chrome 浏览器上运行良好，但在 safari 上不起作用，我在同一页面中还有其他动画，它们在 chrome 和 safari 上都运行良好，但不是这个。 我想知道我做错了什么。 我尝试调试它，我可以看到 Safari 图形选项卡中有一条消息说
1回复

如何获取关键帧以使响铃看起来像在响

我试图创建一个关键帧以使钟声的图像看起来好像在响。 截至目前，关键帧未运行或至少看起来未运行。 有人看到我在做什么错吗？ #subscribeButton { width: 50%; height: 150px; background: #1b8c00; backgrou