Блог

У меня есть очень простая анимация с использованием react-spring. Цель состоит в том, чтобы анимировать высоту элемента, а затем, после завершения анимации, установить высоту этого элемента в «авто».

Вот что я пытаюсь сделать:

   useEffect(() => {
    if (!accordionBodyRef.current) return;
    const accordionBodyDiv = accordionBodyRef.current;
    const height = `${accordionBodyDiv.scrollHeight}px`;
    if (isOpen) {
      bodySpringApi.start({
        to: { height },
        onRest: () => {
          accordionBodyDiv.setAttribute("style", "height: auto;");
          accordionBodyDiv.style.height = "auto";
        },
      });
    } else {
      bodySpringApi.start({
        from: {
          height,
        },
        to: {
          height: "0px",
        },
      });
    }
  }, [isOpen, bodySpringApi]);
 

Я пытаюсь вручную задать стиль div, используя ссылку в методе «onRest» api spring, но это просто не работает.

Есть ли что-нибудь еще, что я могу попробовать?