繁体   English   中英

如何在 React 中使用样式化组件来获取关键帧动画

How to use styled components in React in order to get keyframe animations

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我是 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 工作的帮助都会非常有帮助。

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>
);
  1. 要为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;
`;
  1. 可选:要实际看到 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>
);

这是一个活生生的例子

2 V4 中带有样式组件的关键帧动画

我正在尝试简单地为 div 设置动画以更改背景 colors 以复制成功的 flash,但在样式组件关键帧和 css 助手方面存在问题。 下面是代码示例,我也尝试过在 animation 变量引用周围不使用 css ,但随后出现 V4 错误。 有什么建议可以渲染吗? 我可以通过点击简单的 css 来 ...

5 如何在React中使用样式化组件?

请原谅我的困惑和新鲜感。 我正在尝试导出样式化的Button。 完全茫然和困惑。 请帮忙。 我并不是真的想导出2个按钮,如图所示,但是我想导出一个按钮,其中包含道具的样式,并且给定样式为默认样式,我认为:( 还有我的App元素(如果相关) ...

9 如何在一个中使用多个关键帧动画?

我想使用两个不同的关键帧动画,但是当我命名第二个动画时,它似乎不起作用。 基本上我想将第一个动画同时添加到第一个包装中,并将第二个动画同时添加到第二个包装中,为什么这不起作用? @keyframes scroll { 0% { -webkit-transform: transl ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM