javascript - 组件忘记拖动的起点

Question

当我遇到一些问题时，我在我的一个宠物项目中使用animejs和react-draggable 。我有一个沿 Y 轴平移子组件的动画。每当我单击按钮时都会触发此动画。第一次单击时，组件会向下移动任意图形。在第二次单击时，组件的 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

这一切都有效。问题是每当我在触发第一个动画之前拖动子组件时，该组件似乎忘记了如何在第二个动画上回到其父组件的顶部。我想我一定遗漏了一些非常重要且非常明显的东西。如何让子组件显示我想要的行为？任何帮助，将不胜感激。先感谢您。

标签： javascriptcssreactjsdraggableanime.js