[Feature] Анимации у выпадающих меню #2250
Comments
2 tasks
inomdzhon
added a commit
that referenced
this issue
Jun 20, 2024
h2. Описание В CSS файлах применил медиа-выражение `@media screen and (prefers-reduced-motion: reduce)` там, где необходимо. Попутно рефакторил некоторые из них. Например, примененил токен `--vkui--animation_duration_m` где это возможно. > [!NOTE] > > Упрощал основываясь на поведении **iOS** и приложений под него. При включении параметра **Уменьшение движения** + **Предпочтение перекрёстным наплывам** (_Настройки_ -> _Универсальный доступ_ -> _Движение_) переходы, зачастую, заменяются на анимацию через смену прозрачности. Затронутые анимации: > [!NOTE] > Длительность и изинги **НЕ** трогал, только подменял изменение размеров и/или передвижения. - `ActionSheet` - параметры анимации вынесены в переменные `--vkui_internal--*`; - анимация появления/скрытия упрощается до появление через прозрачность. - для анимаций теперь используется `useCSSKeyframesAnimationController()`. - `Alert` - параметры анимации вынесены в переменные `--vkui_internal--*`; - анимация появления/скрытия упрощается до появление через прозрачность; - добавил анимацию для десктоп (#2250); - для анимаций теперь используется `useCSSKeyframesAnimationController()`. - `Button` - удалён `@media screen and (prefers-reduced-motion: no-preference)`, т.к. допустимая анимация. - `PanelHeaderContext` - параметры анимации вынесены в переменные `--vkui_internal--*`; - для анимаций теперь используется `useCSSKeyframesAnimationController()`. - `useGlobalEventListener()` заменён на `useGlobalOnClickOutside()`. И теперь, если `visible === false`, то компонент не остаётся в DOM; - теперь при `visible === false` возвращаем `null`. - `Removable` - удалён `@media screen and (prefers-reduced-motion: no-preference)`, т.к. допустимая анимация. - `Root` - анимация появления/скрытия упрощается до появление через прозрачность. - `Skeleton` - анимации отключаются. - `Snackbar` - анимация появления/скрытия упрощается до появление через прозрачность; - остаётся возможность закрыть через свайп – вызывает закрытие через прозрачность. - `Switch` - удалён `@media screen and (prefers-reduced-motion: no-preference)`, т.к. допустимая анимация. - `View` - анимация появления/скрытия упрощается до появление через прозрачность; - остаётся возможность свайпать; - в примеры документации добавил кнопки "Назад" в `PanelHeader`. - `animationFades.module.css` - удалён `@media screen and (prefers-reduced-motion: no-preference)`, т.к. допустимая анимация. - `focusVisible.module.css` - заменил `@media screen and (prefers-reduced-motion: no-preference)` на `@media screen and (prefers-reduced-motion: reduce)` h3. Что не затронул? Не трогал мобильный `ModalRoot` дабы не сломать его. Лучше сделать в рамках #2449. h2. Остальные изменения - в `docs/CONTRIBUTING.md` добавил информацию про a11y (заодно немного освежил документ); - удалён хук `useTimeout()` и везде заменён на ручной запуск и очистку – этот хук больше усложняет код, чем упрощает; - удалён `lib/supportEvents.ts`, т.к. все браузеры из текущего `.browserslistrc` поддерживают событие [transitionend](https://developer.mozilla.org/ru/docs/Web/API/Element/transitionend_event#%D1%81%D0%BE%D0%B2%D0%BC%D0%B5%D1%81%D1%82%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D1%8C_%D1%81_%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0%D0%BC%D0%B8); ~- удалён хук `useReducedMotion()` – на текущий момент больше не используется, т.к. оказывается `(prefers-reduced-motion: reduce)` не предполагает полное отключение всех анимаций, а лишь говорит, что надо их упростить.~ (**UPD** вернул в рамках ⚡ c89d7d1). Эти изменения привели к следующему: - `useWaitTransitionFinish()` – теперь и возвращает сразу функцию не оборачивая его в объект; - `PopoutWrapper` – теперь компонент неконтролируемый – показывается/скрывается в зависимости от параметра `closing`. h3. Типы - добавлен `TimeoutId`, чтобы не приходилось каждый раз писать `ReturnType<typeof setTimeout> | null;`. h3. Тесты - применён `waitCSSKeyframeAnimationEnd()` там, где раньше была завязка на `setTimeout`; - добавлена утилита `waitCSSTransitionEnd()`; - добавлен мок для `TransitionEvent`.
| ✅ v6.2.0 🎉 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2022-02-12.15.48.34.mov
See: #2249
The text was updated successfully, but these errors were encountered: