CSS transition, max-height
Имеется боковая панель, содержащая в себе список с элементами разной высоты (зависит от длины текста). При сворачивании эта панель должна отображать только часть содержимого элементов списка.
Приложение описано на React.
Проблема в том, что при "разворачивании" панели - иконки резко меняют позицию без использования свойства transition (указано по свойству, которое изменяется). (Если менять через панель разработчика в браузере свойства, которые меняются при наличии класса - то все идет с использованием transition)
Не могли бы вы подсказать в чем затык\ошибка?
Это я не туда поместил transition (или не на то свойство) или же это косяк навешивания доп. класса для элемента?
В codepen копия работает более-менее корректно, в React-приложении же нет.
Ответы (1 шт):
Разобрался. Проблема никак не связана с css. Для генерации элементов я также использую уникальные идентификаторы, которые генерирую непосредственно в компоненте. При смене состояния реакт выполняет ре-рендер, в рамках которого идентификаторы заново генерируются и поддерево элементов изменяется, из-за этого transition не отрабатывает
const mappedMenuItems: Array<SidePanelItem & { uid: string }> =
props.items.map(menuItem => ({
...menuItem,
uid: generateUid()
}));