Компонент забывает начальную точку при перетаскивании - PullRequest
Новая
       165

Компонент забывает начальную точку при перетаскивании

2 голосов
/ 29 мая 2020

Я играл с anime js и react-draggable в моем домашнем проекте, когда я столкнулся с небольшой проблемой. У меня есть анимация, которая переводит дочерний компонент по оси Y. Эта анимация запускается всякий раз, когда я нажимаю кнопку. При первом нажатии компонент перемещается вниз на произвольную фигуру. При втором щелчке TOP компонента должен совпадать с TOP его родительского элемента. ДЕТСКИЙ КОМПОНЕНТ 

import React, { useRef, useState } from 'react'
import animate from 'animejs'
import Draggable from 'react-draggable'
import utils from '../utils/index'

import ControlPanel from './player/controls/controlPanel'
import SongInfo from './player/song/songInfo'
import Header from './player//header/header'
import Footer from './player/footer/footer'
import ProgressBar from './player/progress/progressBar'

function Player({ getSpotifyPosition }) {
    const [active, setActive] = useState(true)
    const [color, setColor] = useState('#d4d4d4')
    const [top, setTop] = useState(0)

    const playerRef = useRef()
    const getPlayerPosition = utils.getCoordinates.bind(playerRef)


    const minimizePlayer = () => {
        setActive(!active)
        let {y: spot_y, height: spot_height} = getSpotifyPosition()
        let {y: play_y, height: play_height} = getPlayerPosition()



        let options = {
            targets: playerRef.current,
            easing: 'linear',
            duration: 350,
            translateY: active ? (700 - (play_y - spot_y)) : 0          
        }



        animate(options)




    }

    return (
        <Draggable axis='y' bounds={{ top: 0 }}>
            <div style={{ height: '100%' }}>
                <div
                    className='player'
                    ref={playerRef}
                    style={{ backgroundColor: color }}
                >
                    <Header minimizePlayer={minimizePlayer} />
                    <SongInfo setColor={setColor} />
                    <ProgressBar />
                    <ControlPanel />
                    <Footer />
                </div>
            </div>
        </Draggable>
    )
}

export default Player

Все это работает. Проблема в том, что всякий раз, когда я перетаскиваю дочерний компонент перед запуском первой анимации, кажется, что компонент забывает, как вернуться к родительской вершине во второй анимации. Я полагаю, что мне не хватает чего-то очень важного и довольно очевидного. Как мне заставить дочерний компонент показать желаемое поведение? Любая помощь будет оценена. Заранее спасибо.

...