Почему мой элемент задерживается перед уходом и не анимируется в компоненте перехода с помощью React-Spring? - PullRequest
Новая
       64

Почему мой элемент задерживается перед уходом и не анимируется в компоненте перехода с помощью React-Spring?

0 голосов
/ 21 июня 2020

Итак, я в основном создавал свой собственный слайдер с помощью React-Spring. Вот код для слайдера. js: 

import React, {useState} from 'react'
import {animated} from 'react-spring'
import {Transition} from 'react-spring/renderprops'

import '../assets/css/slider.css'

function Slider(props){
   const [index, setIndex] = useState(0)

   return (
      <div className="slider">
         <Transition
            native
            reset
            unique
            items={index}
            from={{ opacity: 0, transform: "translate3d(100%, 0 ,0)" }}
            enter={{ opacity: 1, transform: "translate3d(0%, 0, 0)" }}
            leave={{ opacity: 0, transform: "translate3d(-50%, 0, 0)" }}
         >
            {index => style => (
               <animated.div style={{...style}} className="slider-item">
                  {React.createElement(props.slides[index])}
               </animated.div>
            )}
         </Transition>
         <button onClick={() => (index === 0) ? setIndex(props.totalSlides-1) : setIndex(index-1)}>Left</button>
         <button onClick={() => setIndex((index + 1)%props.totalSlides)}>Right</button>
      </div>
   )
}

export default Slider

Я пытался создать повторно используемый компонент, поэтому массив слайдов помещается внутри props для компонента Slider. Для этой конкретной практики я использую ProjectsList. js как массив слайдов. Вот список проектов. js: 

import React from 'react'

export default [
   () =>
   <div>
      Slide 1
   </div>,
   () =>
   <div>
      Slide 2
   </div>
]

И на странице, использующей компонент Slider, я называю это так: 

import Slider from '../components/Slider.js'
import items from '../data/ProjectsList.js'

<Slider slides={items} totalSlides={2}/>

logi c для слайдера точно так же, как я думал, где это будет бесконечный слайдер. Однако он ничего не анимирует для div, и текущий слайд всегда откладывается перед выходом, когда появляется следующий слайд.

Вот изображение: I press right, the present slide was Slide 1 Нажимаю вправо, текущий слайд был слайдом 2

Кто-нибудь знает, в чем проблема с моим кодом?

1 Ответ

1 голос
/ 22 июня 2020

Ваша основная проблема в том, что api хука и рендера props для react spring разделены. Вы используете animated API-интерфейса хуков с компонентом render props Transition. Попробуйте импортировать анимацию из того же места. 

import {Transition, animated} from 'react-spring/renderprops'

Я добавил, абсолютную позицию и удалил некоторые свойства из Transition. Требуется CSS, но работает намного лучше.

https://codesandbox.io/s/sharp-mahavira-uqxcf

...