为什么我的元素在离开之前被延迟了，并且没有使用React-Spring在转换组件中进行动画处理？

Question

所以，我基本上是使用React-Spring创建我自己的滑块，这是Slider.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中。对于这个特殊的实践，我使用ProjectsList.js作为幻灯片数组。下面是ProjectsList.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}/>

滑块的逻辑就像我想的那样，它将是一个无限的滑块。但是，它不会为div生成任何动画，并且当前幻灯片总是在下一张幻灯片进入之前延迟离开。

如下图所示：

​

有人知道我的代码出了什么问题吗？

Answer 1

你的主要问题是，react spring的钩子和渲染属性api是分离的。您可以将hook api的animated与render props Transition组件一起使用。尝试从同一位置导入动画。

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

我添加了绝对位置，并从过渡中删除了一些属性。它需要一些CSS，但效果要好得多。

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