почему анимация компонента мигает после первой анимации? - PullRequest
Новая
       17

почему анимация компонента мигает после первой анимации?

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

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

const PictureArt = (props) => {

    const containerStyle = {
        display: 'flex',
        justifyContent: 'center',
        padding: '30px'
    }

    const imageStyle = {
        width: '100%',
        height: 'auto',
        borderRadius: '5px',
        boxShadow: '5px 5px 20px',
    }

    const captionStyle = {
        fontSize: '200%', color: 'grey', textAlign: 'center'
    }

    const descriptionStyle = {
        fontSize: '150%',
        border : '1px ridge brown' , 
        borderRadius : '20px' , 
        padding:'30px' ,
        color: 'rgba(100,100,100,0.8)',
        textAlign: 'center'
    }

    const LoadingIcon = () => {
        return (
            <div className="rotatingLoader" style={{
                borderRadius: '50%',
                borderWidth: '5px',
                height: '100px',
                width: '100px',
                border: '35px solid grey',
                borderTop: '30px ridge rgba(128,128,255,0.8)',
                borderRight: '3px ridge rgba(128,100,128,0.8)',
                borderLeft: '3px ridge rgba(128,155,100,0.8)',
                borderBottom: '30px ridge rgba(228,100,100,0.8)',
            }}> </div>
        )
    }

    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 [color, setColor] = useState('red')

    useEffect((props)=>{
        console.log('current index = ' , currentIndex)
    },[currentIndex])


    const totalItems = items.length ; 

    const picTransition = useTransition(currentIndex , null, {
        from: { opacity: '0', transform: `rotate(90deg) translate3d(${window.innerWidth * 0.8}px,0px,0)` },
        enter: [{ opacity: '1', transform: 'rotate(0deg) translate3d(0,0,0)' }],
        leave: { opacity: '0', transform: `rotate(-90deg) translate3d(${-window.innerWidth}px , 0px , 0)` },
        config: {
            tension: '30',
            friction: '10'
        }
    })
    const currentItem = items[currentIndex] ; 

    return (
        <>
            <button onClick={e=>setCurrentIndex((currentIndex+1)%totalItems)}>"+"</button>
            <div>
                <div className="container" style={containerStyle}>
                    {
                        picTransition.map(({ item, props, key }) => {
                            return (
                                <animated.div className="MainSlide" style={props} key={key}>
                                    <div style={{ width: '500px' }}>
                                        <Img src={currentItem.url} style={imageStyle} loader={<div style={{ transform: 'translate3d(50%,50%,0)', top: '50%', bottom: '50%' }}><LoadingIcon /></div>}  ></Img>
                                    </div>
                                    <div style={captionStyle}>
                                        <p>{currentItem.caption}</p>
                                    </div>
                                    <div style={descriptionStyle}>
                                        <p>{currentItem.description}</p>
                                    </div>
                                </animated.div>)
                        })
                    }

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