Как использовать анимацию каждый раз, когда изображение изменяется с реагирующей весной? - PullRequest
Новая
       27

Как использовать анимацию каждый раз, когда изображение изменяется с реагирующей весной?

0 голосов
/ 03 июля 2019

Я пытаюсь использовать анимацию, которая используется изначально, когда страница загружается каждый раз, когда пользователь нажимает следующую в карусели изображений.

Я пытался использовать реактивные пружины, подобные этой: 

const springs = useSprings(cards.map(item => ({ opacity: item.opacity }))

однако я получаю «Ошибка типа: невозможно прочитать свойство '0' неопределенного» * ​​1006 *

это работает при использовании useSpring (не во множественном числе): 

import React, { useState } from "react";
import { useSpring, animated } from "react-spring";
import "./App.css";

const cards = [
  "https://upload.wikimedia.org/wikipedia/en/f/f5/RWS_Tarot_08_Strength.jpg",
  "https://upload.wikimedia.org/wikipedia/en/5/53/RWS_Tarot_16_Tower.jpg",
  "https://upload.wikimedia.org/wikipedia/en/9/9b/RWS_Tarot_07_Chariot.jpg",
  "https://upload.wikimedia.org/wikipedia/en/d/db/RWS_Tarot_06_Lovers.jpg",
  "https://upload.wikimedia.org/wikipedia/en/d/de/RWS_Tarot_01_Magician.jpg"
];

export default function App() {
  const [count, setCount] = useState(0);

  const props = useSpring({
    opacity: 1,
    marginTop: 100,
    boxShadow: "0px 100px 20px 0px rgba(0,0,0,0.4)",
    from: { opacity: 0, marginTop: 10 }
  });

  const prevSlide = () => {
    let prevSlide = count - 1 < 0 ? cards.length - 1 : count - 1;
    setCount(prevSlide);
  };

  const nextSlide = () => {
    let nextSlide = count + 1 < cards.length ? count + 1 : 0;
    setCount(nextSlide);
  };

  return (
    <div>
      <div className="container">
        <animated.div style={props}>
          <img src={cards[count]} alt="carousel-img" />
        </animated.div>
      </div>
      <div className="carousel__prev" onClick={prevSlide}>
        ◀︎
      </div>
      <div className="carousel__next" onClick={nextSlide}>
        ▶︎
      </div>
    </div>
  );
}

Какполучить анимацию, чтобы она исчезла с изображения сверху при нажатии следующей кнопки?

1 Ответ

0 голосов
/ 04 июля 2019

Я думаю, что для карусели функция useTransition лучше, чем useSprings. Вы можете определить входящую и выходящую анимацию с помощью useTransition. При нажатии кнопки «Далее» предыдущее и следующее изображение должны перекрываться, поэтому я изменил положение на абсолютное. Таким образом, макет страницы немного изменился. Вы должны это исправить. 

export default function App() {
  const [count, setCount] = useState(0);

  const transitions = useTransition([count], item => item, {
    from: { opacity: 0, marginTop: 10, position: 'absolute', boxShadow: "0px 100px 20px 0px rgba(0,0,0,0.4)" },
    enter: { opacity: 1, marginTop: 50},
    leave: {opacity: 0, marginTop: 100}
  });

  const prevSlide = () => {
    let prevSlide = count - 1 < 0 ? cards.length - 1 : count - 1;
    setCount(prevSlide);
  };

  const nextSlide = () => {
    let nextSlide = count + 1 < cards.length ? count + 1 : 0;
    setCount(nextSlide);
  };

  return (
    <div>
      <div className="container">
        {transitions.map(({item, props, key}) => (
          <animated.div key={key} style={props}>
          {item}
            <img src={cards[item]} alt="carousel-img" />

          </animated.div>
        ))}

      </div>
      <div className="carousel__prev" onClick={prevSlide}>
        ◀︎
      </div>
      <div className="carousel__next" onClick={nextSlide}>
        ▶︎
      </div>
    </div>
  );
}

Это пример codeSandbox: https://codesandbox.io/s/image-carousel-with-react-spring-usetransition-q1ndd

В примере с кодами и ящиками я также ввел реверсивное состояние, потому что было бы лучше, если бы я изменил анимацию с помощью кнопки prev.

...