Почему эта складная анимация не срабатывает, когда окно браузера расширяется по горизонтали? ⇐ CSS

[Anonymous]

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

Код: Выделить всё

import { cn } from '@/utils';
import { useRef, ReactNode, useState, useEffect } from 'react';

type CollapsibleProps = {
collapsed?: boolean;
className?: string;
children: ReactNode;
};

export const Collapsible = ({
collapsed = true,
className,
children,
}: CollapsibleProps) => {
const contentRef = useRef(null);
const [maxHeight, setMaxHeight] = useState('0px');

const updateMaxHeight = () => {
if (contentRef.current && !collapsed) {
setMaxHeight(`${contentRef.current.scrollHeight}px`);
} else {
setMaxHeight('0px');
}
};

useEffect(() => {
updateMaxHeight();

const handleResize = () => {
updateMaxHeight();
};

window.addEventListener('resize', handleResize);

return () => {
window.removeEventListener('resize', handleResize);
};
}, [collapsed]);

return (
ref={contentRef}
className={cn(
'w-full overflow-hidden transition-all duration-300 ease-in-out',
className,
)}
style={{
maxHeight: maxHeight,
}}
>
{children}

);
};

Рабочий стол:


Мобильный:



Подробнее здесь: https://stackoverflow.com/questions/790 ... ndow-expan