реактивная пружина, показывающая резкие движения в переходе - PullRequest
Новая
       41

реактивная пружина, показывающая резкие движения в переходе

0 голосов
/ 08 ноября 2019

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

Код выглядит следующим образом: 

import React, { useState, useEffect } from 'react'
import { useTransition, animated } from 'react-spring'

import '../style/Gallery.css'

const pages = [
    ({ style }) => <animated.div style={{ ...style, background: 'lightpink' }}>A</animated.div>,
    ({ style }) => <animated.div style={{ ...style, background: 'lightblue' }}>B</animated.div>,
    ({ style }) => <animated.div style={{ ...style, background: 'lightgreen' }}>C</animated.div>,
]

const Gallery = () => {
    const [index, set] = useState(0)

    const transitions = useTransition(index, p => p, {
        from: { opacity: 0, transform: 'translate3d(100%,0,0)' },
        enter: { opacity: 1, transform: 'translate3d(0%,0,0)' },
        leave: { opacity: 0, transform: 'translate3d(-50%,0,0)' },
    })

    useEffect(() => void setInterval(() => set(state => (state + 1) % 3), 2000), [])

    return (
        <div className="gallery">
            {transitions.map(({ item, props, key }) => {
                const Page = pages[item]
                return <Page key={key} style={props} />
            })}
        </div>
    )
}

export default Gallery

1 Ответ

0 голосов
/ 08 ноября 2019

Когда удаляется элемент, его пустое пространство вызывает рывки. Попробуйте абсолютное позиционирование. 

  from: { position:'absolute', opacity: 0, transform: 'translate3d(100%,0,0)' },
...