эффект привязки компонента при переходе анимации в реагирующую пружину? - PullRequest
Новая
       8

эффект привязки компонента при переходе анимации в реагирующую пружину?

0 голосов
/ 07 марта 2019

Я пытаюсь использовать анимацию каждый раз, когда изменяется компонент изображения. Первая анимация при загрузке страницы в порядке. Когда я нажимаю кнопку «+», анимация резко возвращается к своему окончательному положению и становится не плавной. Я не понимаю, почему происходит этот мгновенный эффект. Как это исправить ? 

const PictureArt = (props) => {
    const imageStyle = {
        width: '100%',
        height: 'auto',
        borderRadius: '5px',
        boxShadow: '5px 5px 20px',
    }


    const [items, setItems] = useState([{
    url: 'http://4.bp.blogspot.com/-mZwB8lpO3-0/UN1r7ZrbjnI/AAAAAAAADBU/rqa5a2DD_KY/s1600/White_Flower_Closeup.jpg',
    caption: 'flower',
    description: "When the flower looked beautiful ... "
}, {
    url: 'http://4.bp.blogspot.com/-mZwB8lpO3-0/UN1r7ZrbjnI/AAAAAAAADBU/rqa5a2DD_KY/s1600/White_Flower_Closeup.jpg',
    caption: 'flower',
    description: "When the flower looked beautiful ... "
}]);

    const [currentIndex, setCurrentIndex] = useState(0);

    const totalItems = items.length ; 

    const picTransition = useTransition(currentIndex , null, {
        from: { opacity: '0', transform: `translate3d(100px,0px,0)` },
        enter: { opacity: '1', transform: 'translate3d(0,0,0)' },
        leave: { opacity: '0', transform: `translate3d(-100px , 0px , 0)` },
    })
    const currentItem = items[currentIndex] ; 

    return (
        <>
            <button onClick={e=>setCurrentIndex((currentIndex+1)%totalItems)}>"+"</button>
            <div>
                <div className="container">
                    {
                        picTransition.map(({ item, props, key }) => {
                            return (
                                <animated.div style={props} key={key}>
                                    <div style={{ width: '500px' }}>
                                        <img src={currentItem.url} style={imageStyle}  ></img>
                                    </div>
                                </animated.div>)
                        })
                    }

                </div>
            </div>
        </>
    );
}

function App() {
  return (
    <div className="App">
      <h1>Click below + button</h1>
      <PictureArt/>
    </div>
  );
}

Вот фрагмент кода и коробки: https://codesandbox.io/s/wn6jp23vxl

1 Ответ

1 голос
/ 18 апреля 2019

Я столкнулся с той же проблемой, и я исправил вашу песочницу, добавив position: absolute к div, обертывающему img.Я сделал это после анализа этой песочницы от создателя реактивной пружины: 

<div style={{ width: "500px", position: "absolute" }}>
  <img src={currentItem.url} style={imageStyle} />
</div>

Надеюсь, это поможет

...