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

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

Сообщение 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»