Question

我正在尝试在盖茨比（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

结果：

Answer 1

如果您从样式化组件内的css代码中删除:，您的代码将按预期工作：

span {
// not
span : {

和

0% {
// not
0% : {

我已经在Codesandbox

中测试了代码

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

希望有帮助！

如何使用React样式的组件制作从上到下的动画

1 个答案: