(low) Drawer.tsx/Drawer: slide-out анимация при закрытии не проигрывается (ветка !open рендерит новый пустой узел) #1481

New issue

Closed

opened 2026-06-15 05:57:45 +00:00 by bot-backend · 0 comments

bot-backend commented

2026-06-15 05:57:45 +00:00

Collaborator

Severity: low · Категория: frontend · Файл: frontend/src/components/ui/Drawer.tsx:144-159

Drawer.tsx:144-159. На open=false ветка !open возвращает совершенно другое DOM-дерево (

с самозакрывающимся

без {children}), тогда как в open-ветке (строки 161-185) рендерится

с overlay и {children}. Заявленная в комментарии (строка 145) цель «Keep in DOM for transition» не достигается: при переключении open→false React размонтирует элемент с transform translate(0) и монтирует НОВЫЙ узел, у которого transform translate(100%) выставлен сразу при первом рендере — CSS-transition не запускается на свежесмонтированном элементе (нет стартового значения для интерполяции). Итог: панель пропадает скачком, slide-out не виден. Уточнение к исходному кандидату: панель не «уезжает пустой», она вообще не анимируется при закрытии (анимируется только открытие). Импакт чисто косметический (резкое исчезновение drawer в PilotRequestModal side=bottom и Section3 drill-down side=right), функциональность не ломается. Чинить: либо рендерить {children} и в ветке !open и не менять структуру обёртки между состояниями (единое дерево, переключать только transform), либо использовать состояние «closing» с задержкой размонтирования (setTimeout/onTransitionEnd ~180ms), либо библиотечный exit-transition.

Почему баг: Док-комментарий на строке 145 прямо заявляет цель «Keep in DOM for transition» — то есть авторская интенция в том, чтобы при закрытии панель плавно уезжала С контентом. Но в JSX ветки !open (строка 156)

рендерится самозакрывающимся, без {children}. children присутствуют только в ветке open (строка 182). Значит заявленная цель не достигается: транзишн проигрывается на визуально пустой панели. Это не косметика форматирования — это сломанная заявленная функциональность анимации drawer, используемого в PilotRequestModal (side=bottom) и Section3 drill-down (side=right).

Как чинить: Рендерить единый DOM-узел во всех состояниях: всегда отдавать overlay+panel, переключая только pointerEvents/aria-hidden/opacity и transform по open, и держать {children} внутри панели всегда (или хотя бы на время transitionend). Сейчас же две разные JSX-ветки приводят к тому, что children монтируются/размонтируются ровно в момент toggle.

_{deep-audit «армия ботов 2» · verify+harden, confidence 0.78 · unit U104}

**Severity:** low · **Категория:** frontend · **Файл:** `frontend/src/components/ui/Drawer.tsx:144-159` Drawer.tsx:144-159. На open=false ветка !open возвращает совершенно другое DOM-дерево (<div aria-hidden> с самозакрывающимся <div ref={drawerRef} style={panelStyle} /> без {children}), тогда как в open-ветке (строки 161-185) рендерится <div role="dialog"> с overlay и {children}. Заявленная в комментарии (строка 145) цель «Keep in DOM for transition» не достигается: при переключении open→false React размонтирует элемент с transform translate(0) и монтирует НОВЫЙ узел, у которого transform translate(100%) выставлен сразу при первом рендере — CSS-transition не запускается на свежесмонтированном элементе (нет стартового значения для интерполяции). Итог: панель пропадает скачком, slide-out не виден. Уточнение к исходному кандидату: панель не «уезжает пустой», она вообще не анимируется при закрытии (анимируется только открытие). Импакт чисто косметический (резкое исчезновение drawer в PilotRequestModal side=bottom и Section3 drill-down side=right), функциональность не ломается. Чинить: либо рендерить {children} и в ветке !open и не менять структуру обёртки между состояниями (единое дерево, переключать только transform), либо использовать состояние «closing» с задержкой размонтирования (setTimeout/onTransitionEnd ~180ms), либо библиотечный exit-transition. **Почему баг:** Док-комментарий на строке 145 прямо заявляет цель «Keep in DOM for transition» — то есть авторская интенция в том, чтобы при закрытии панель плавно уезжала С контентом. Но в JSX ветки !open (строка 156) <div> рендерится самозакрывающимся, без {children}. children присутствуют только в ветке open (строка 182). Значит заявленная цель не достигается: транзишн проигрывается на визуально пустой панели. Это не косметика форматирования — это сломанная заявленная функциональность анимации drawer, используемого в PilotRequestModal (side=bottom) и Section3 drill-down (side=right). **Как чинить:** Рендерить единый DOM-узел во всех состояниях: всегда отдавать overlay+panel, переключая только pointerEvents/aria-hidden/opacity и transform по open, и держать {children} внутри панели всегда (или хотя бы на время transitionend). Сейчас же две разные JSX-ветки приводят к тому, что children монтируются/размонтируются ровно в момент toggle. --- <sub>deep-audit «армия ботов 2» · verify+harden, confidence 0.78 · unit U104</sub>