Как сохранить состояние HTML-элемента после его анимации? ⇐ CSS

[Anonymous]

Я создаю визуализатор фортепиано в React, чтобы, когда пользователь нажимал клавишу фортепиано, прямоугольник div расширялся сверху (его высота увеличивалась) непрерывно, пока пользователь не отпустил клавишу, после чего прямоугольник div будет двигаться вверх (нижняя переменная увеличивается), удаляется, когда нижняя часть div выходит за верхнюю часть экрана.
В настоящее время я делаю это с помощью CSS-анимации, которая бесконечно воспроизводитexpand_up, когда пользователь нажимает клавишу, а затем, когда они отжимают клавишу, переключает анимацию на move_up. Проблема в том, что вне анимации не указана высота по умолчанию (это то, что мне нужно, поскольку я хочу, чтобы высота определялась с помощьюexpand_up), поэтому после того, как элемент div меняет анимацию, его высота возвращается к 0.
Я попытался получить высоту перед изменением анимации, а затем установить эту высоту для элемента div, который успешно получил высоту, но высота элементов не изменилась. Я также попытался указать переменную стиля при создании div JSX через массив высот:
let [height_dic, set_height_dic] = useState({})


но высота остается «авто», даже если соответствующий ключ переменной счетчика добавляется в height_dic. У меня такое ощущение, что это как-то связано с тем, что элемент не перерисовывается. Ниже приведен код в текущем состоянии.
Внутри компонента PianoVisual
useEffect(() => {
if (this_pressed) {
// I NEED TO CREATE VISUAL INSTANCE HERE
set_key_down(true)
play_sound()

set_visuals(prev_state => ({
...prev_state,
[counter]: (
visual_refs.current[counter] = ref} className='visualizer-instance expand_up'>
)
}))

} else {
if (key_down) {
// I NEED CHANGE ANIMATION FROM EXPAND TO MOVE HERE
let curr_visual = visual_refs.current[counter]
curr_visual.classList.remove('expand_up')
curr_visual.classList.add('move_up')
const { top, height } = visual_refs.current[counter].getBoundingClientRect()
curr_visual.style.height = `${height}px`

curr_visual.addEventListener('animationend', () => {
// set_visuals(visuals.filter((visual) => visual.id !== id));
delete visual_refs.current[counter];
})

set_counter(prev_state => prev_state + 1)
set_key_down(false)

}
}
}, [this_pressed])

return (


{Object.keys(visuals).map((key, index) => {
return visuals[key]
})}

onMouseUp={() => set_this_pressed(false)} onMouseDown={() => set_this_pressed(true)} onMouseLeave={() => set_this_pressed(false)} >{keyboard_key}


)

CSS-анимация
@keyframes expand_up {
0% {
position: absolute;
height: 0;
bottom: 0;
}

100% {
position: absolute;
bottom: 0;
height: 300000px;
}
}

@keyframes move_up {
0% {
position: absolute;
bottom: 0;
}

100% {
position: absolute;
bottom: 300000px;
}
}

.visualizer-instance {
background-color: var(--ten-color);
position: absolute;
width: 100%;
}
.expand_up {
animation: expand_up 1000s linear;
}

.move_up {
animation: move_up 1000s linear;
}


Подробнее здесь: https://stackoverflow.com/questions/781 ... -animation