Как сделать анимацию сверху вниз с реагирующими элементами - PullRequest
Новая
       76

Как сделать анимацию сверху вниз с реагирующими элементами

0 голосов
/ 01 декабря 2018

Я пытаюсь воссоздать слайдер на веб-сайте Гэтсби, но использую библиотеку стилизованных компонентов вместо библиотеки эмоций, которую они использовали.Проблема в том, что анимация ничего не делает, и список строк, которые я передаю в компонент, объединяется вместе.

Gatsbyjs.org

Код дляих компонент слайдера

My 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

Результат:

enter image description here

1 Ответ

0 голосов
/ 03 декабря 2018

Ваш код работает должным образом, если вы удалите : из кода CSS внутри стилизованного компонента: 

span {
// not
span : {

и 

0% {
// not
0% : {

Я тестировал код вa 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

Надеюсь, это поможет!

...