react-spring 显示过渡中的抖动
react-spring showing jerky movements in a transition
我正在使用 react-spring
创建一个简单的图库动画。我希望图像从右侧出现并在平滑过渡中向左离开。但是,我似乎无法摆脱如图所示的抖动 here。
代码如下:
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
当离开的元素取消时,它的空 space 导致抽动。尝试绝对定位。
from: { position:'absolute', opacity: 0, transform: 'translate3d(100%,0,0)' },
我正在使用 react-spring
创建一个简单的图库动画。我希望图像从右侧出现并在平滑过渡中向左离开。但是,我似乎无法摆脱如图所示的抖动 here。
代码如下:
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
当离开的元素取消时,它的空 space 导致抽动。尝试绝对定位。
from: { position:'absolute', opacity: 0, transform: 'translate3d(100%,0,0)' },