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

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

我试图创建一个可重用的组件，以便将幻灯片数组放入 Slider 组件的道具中。对于这个特定的练习，我使用 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}/>

slider的逻辑和我想的一样，就是无限Slider。但是，它不会为 div 设置任何动画，并且当下一张幻灯片进入时，当前幻灯片总是在离开之前延迟。

图片如下：

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

Answer 1

你的主要问题是，react spring 的钩子和渲染道具 api 是分开的。您将挂钩 api 的 animated 与渲染道具 Transition 组件一起使用。尝试从同一个地方导入动画。

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

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

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

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

Why is my element got delayed before leaving and not being animated in Transition Component using React-Spring?

reactjs

slider

transition

react-spring