Складывающаяся панель - очень популярный компонент пользовательского интерфейса, который был включен во многие библиотеки пользовательского интерфейса, поэтому его не так сложно найти, когда вам нужно его использовать. Но как любопытный разработчик, иногда я просто хочу заново изобрести колесо, и на этот раз это складная панель.
Сворачиваемую панель можно свернуть или развернуть, и мы можем использовать состояние React под названием 'isCollapsed', чтобы отслеживать эту информацию о состоянии пользовательского интерфейса и соответствующим образом отображать пользовательский интерфейс, как и код ниже:
Это довольно просто, и любой, кто имеет базовые знания React, может его создать. Однако, когда вы используете этот базовый компонент сворачиваемой панели в своем проекте, вы обнаружите, что он перескакивает между свернутым состоянием и развернутым состоянием без какой-либо анимации.
Всем нравится плавная анимация, почему бы нам не потратить немного больше времени на то, чтобы это произошло?
Когда дело доходит до реализации анимации в React, я предпочитаю библиотеку React Spring, потому что:
- это мощный и простой в использовании
- он имеет лучшую производительность, чем большинство библиотек анимации React, потому что он применяет анимацию, не полагаясь на React для рендеринга обновлений кадр за кадром
Давайте проведем рефакторинг нашего предыдущего кода с помощью React Spring, а затем я расскажу об изменениях в отредактированном коде.
- мы импортируем React Spring
- мы удаляем компонент в стиле ToggleButtonWrapper, потому что он содержит только свойство «transform», и мы будем анимировать его с помощью React Spring.
- мы указываем, что PanelContent является стилизованным компонентом для animated.div, и удаляем свойство CSS 'height' из это потому, что это свойство будет позже анимировано React Spring
- мы создаем анимированные стили для оболочки кнопки переключения и содержимого панели
- мы применяем анимированные стили к обертке кнопки переключения
- мы применяем анимированные стили к содержимому панели
Давайте посмотрим, как наша складная панель теперь работает в реальной жизни:
Как вы можете видеть, кнопка переключения теперь имеет приятную анимацию вращения, но панель содержимого по-прежнему переключается между свернутым и развернутым состояниями без какой-либо анимации. Почему?
Оказывается, с помощью useSpring мы не можем анимировать свойство CSS "auto". Вместо этого нам нужно дать ему точное значение. Но как мы можем получить значение высоты панели содержимого, поскольку разные панели могут иметь разное содержимое, высота также может быть разной?
К счастью, нам на помощь приходит реакция-использование-мера. Это небольшой инструмент, который будет измерять границы (например, ширину, высоту, верхнюю и левую границы) вида, на который мы ссылаемся. Давайте внесем это в наш код, а затем посмотрим на изменения.
- мы импортируем реакцию-использование-меру
- мы используем перехватчик useMeasure (), чтобы получить ссылку и границы этого компонента, на который имеется ссылка.
- мы получаем высоту компонента PanelContentInner из 'границ' объект, возвращаемый хуком useMeasure (), а затем мы используем эту высоту как высоту компонента PanelContent при расширении
- мы устанавливаем компонент PanelContentInner, который содержит контент, как указанный компонент
Спасибо, что следили за инструкциями, и давайте посмотрим на наш конечный продукт :)
Если вы найдете эту статью полезной, посетите мой канал YouTube, где вы также можете найти несколько полезных советов по программированию.
