我可以让媒体查询在常规styled-components组件中正常工作,但是当我尝试在keyframe使用它时(通过从styled-components导入)它似乎根本不起作用。 试图让 div 动画到特定位置,但是当窗口 < 800px 时改变结束位置,我尝试过: 我还尝试将媒体查询放 ...
提示:本站收集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 工作的帮助都会非常有帮助。
有几件事是错误的:
styled-component
创建的组件。 当你这样做const Div = styled.div`
background-color: blue;
`
你刚刚创建了一个新的 React 组件,你可以在任何渲染方法中使用它。 所以你的Home
组件变成了我大写的(react 期望自定义组件是大写的)并重命名了一些组件以避免重复变量):
const Home = () => (
<HomeDiv>
<HomeHeader>
<h1>Welcome to Freight Mule</h1>
</HomeHeader>
</HomeDiv>
);
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;
`;
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>
);
这是一个活生生的例子
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.