css - 如何使用反应样式的组件制作从上到下的动画
问题描述
我正在尝试在 Gatsby 的网站上重新创建滑块,但使用样式组件库而不是他们使用的情感库。问题是动画没有做任何事情,我传递给组件的字符串列表被连接在一起。
我的slider.js:
import React from "react"
import styled, { keyframes } from "styled-components"
const topToBottom = keyframes`
0%: {
opacity: 0;
}
6%: {
opacity: 0;
transform: translateY(-30px);
}
10%: {
opacity: 1;
transform: translateY(0px);
}
25%: {
opacity: 1;
transform: translateY(0px);
}
29%: {
opacity: 0;
transform: translateY(30px);
}
80%: {
opacity: 0;
}
100%: {
opacity: 0;
}
`;
const SliderDiv = styled.div`
display: inline;
& span: {
animation: ${topToBottom} 10s linear infinite 0s;
opacity: 0;
position: absolute;
:nth-child(2) {
animation-delay: 2.5s;
}
:nth-child(3) {
animation-delay: 5s;
}
:nth-child(4) {
animation-delay: 7.5s;
}
}
`;
const Slider = ({ items, color }) => (
<SliderDiv>
{items.map(item => (
<span key={item} css={{ color }}>
{item}
</span>
))}
</SliderDiv>
)
export default Slider
结果:
解决方案
如果您:
从样式化组件内的 css 代码中删除 ,您的代码将按预期工作:
span {
// not
span : {
和
0% {
// not
0% : {
import React from "react";
import styled, { keyframes } from "styled-components";
const topToBottom = keyframes`
0% {
opacity: 0;
}
6% {
opacity: 0;
transform: translateY(-30px);
}
10% {
opacity: 1;
transform: translateY(0px);
}
25% {
opacity: 1;
transform: translateY(0px);
}
29% {
opacity: 0;
transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
`;
const SliderDiv = styled.div`
display: inline;
& span {
animation: ${topToBottom} 10s linear infinite 0s;
opacity: 0;
position: absolute;
:nth-child(2) {
animation-delay: 2.5s;
}
:nth-child(3) {
animation-delay: 5s;
}
:nth-child(4) {
animation-delay: 7.5s;
}
}
`;
const Slider = ({ items, color }) => (
<SliderDiv>
{items.map(item => (
<span key={item} css={{ color }}>
{item}
</span>
))}
</SliderDiv>
);
export default Slider;
我知道我找了几次这个错误:)
为了更清楚,在styled-components
你写css
,而不是css-in-js
希望能帮助到你!
推荐阅读
- android - Facebook 广告延迟深度链接在 Instagram 上不起作用,但同样的广告在 Facebook 上运行良好
- reactjs - 当 url 不正确时 React Router 重定向
- c# - 使用 EmguCV 3.1.0.1 从视频捕获中检测
- c++ - C++11中成员函数的值类别属性是什么?
- php - Paypal PHP SDK 付款状态
- python - 尽管 shell 脚本抛出 [Errno 111] 连接被拒绝,但在 Docker 启动时使用 TCP 服务器执行 python3 脚本
- ruby-on-rails - Rails 5.2 是否可以使用路由来分配枚举值?
- arrays - 多对多表组合成数组
- java - 从 Set 构造 BST
- ruby-on-rails - 如何在 Rails 5 中使用 ChartKick、Ahoy 和地理编码显示用户的位置?