fix(Accordion): use max-height

packages/vkui/src/components/Accordion/Accordion.module.css

@@ -7,6 +7,6 @@
 }
 
 .AccordionContent__in {
-  margin-block-start: -100%;
-  transition: margin-top 100ms ease-in-out;
+  max-block-size: 0;
+  transition: max-height 100ms ease-in-out;
 }

packages/vkui/src/components/Accordion/AccordionContent.tsx

@@ -3,43 +3,38 @@
 import { useExternRef } from '../../hooks/useExternRef';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { useDOM } from '../../lib/dom';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { HasRef, HasRootRef } from '../../types';
 import { AccordionContext } from './AccordionContext';
 import styles from './Accordion.module.css';
 
 /**
- * Функция расчета отрицательного margin, для скрытия контента.
+ * Функция расчета max-height, для скрытия или раскрытия контента.
  */
-function calcMarginTop(expanded: boolean, el: HTMLElement | null): string {
-  if (expanded) {
-    return `0px`;
+function calcMaxHeight(expanded: boolean, el: HTMLElement | null): string {
+  if (!expanded) {
+    return '0px';
   }
 
-  // В первый рендеринг нельзя узнать высоту элемента, поэтому прячем таким образом
+  // В первый рендеринг нельзя узнать высоту элемента
   if (el === null) {
-    return '-100%';
+    return 'inherit';
   }
 
-  return `${-el.clientHeight}px`;
-}
-
-/**
- * В первый рендеринг отключаем анимации.
- */
-function calcTransition(el: HTMLElement | null) {
-  return el === null ? 'none' : undefined;
+  return `${el.scrollHeight}px`;
 }
 
 /**
  * Хук для отслеживания изменения высоты контента.
  */
 function useResizeContent(expanded: boolean, inRef: React.MutableRefObject<HTMLDivElement | null>) {
   const resize = () => {
-    inRef.current!.style.marginTop = calcMarginTop(expanded, inRef.current);
+    inRef.current!.style.maxHeight = calcMaxHeight(expanded, inRef.current);
   };
 
   const { window } = useDOM();
   useGlobalEventListener(window, 'resize', resize);
+  useIsomorphicLayoutEffect(resize, []);
 }
 
 /**
@@ -49,12 +44,11 @@
   expanded: boolean,
   inRef: React.MutableRefObject<HTMLDivElement | null>,
 ) {
-  const marginTop = calcMarginTop(expanded, inRef.current);
-  const transition = calcTransition(inRef.current);
+  const maxHeight = calcMaxHeight(expanded, inRef.current);
 
   useResizeContent(expanded, inRef);
 
-  return { marginTop, transition };
+  return { maxHeight };
 }
 
 export interface AccordionContentProps