Как плавно скрывать сайдбар плавно?

Question

[jack iakovenko]

всем привет !! я совсем новичок и может поможете
есть в секции сайдбар с фильтрами и блок с каталогом,они раскиданы гридомю так вот при нажатии на кнопку hide flters как скрыть сайдбар чтобы скрывался плавно
вот код
https://codepen.io/jackyiakovenko/pen/VwXVExw

Answer 1

[Илья Корень]

transition не работает с display: none/block.
Используете другие решения для анимации:

https://qna.habr.com/search?q=transition+display+n...

Answer 2

[Евгений Беннер]

//default
.filters {
  max-width: 100%;
  opacity: 1;
  grid-columns: 3 span;
  transition: max-width 0.05s, opacity 0.15s;
}
// with hidden class
.filters-hidden .filters {
  max-width: 0;
  opacity: 0;
}

Можно попробовать что-то вроде такого
Если доработать будет гораздо лучше
В целом стоит почитать про такого рода анимации