Свойство transition?

Question

[Денис]

народ кто шарит в transition? Не могу разобраться, набросал в codepen чтоб понятней было. Хочу чтоб клацая по ссылкам был плавный переход, исчезание и появление контента. Но че то не врублюсь. Пытался добавить transition: all 1s linear, ну или что то подобное для этого эффекта, но видать не туда добавляю. еще пытался в jquery вешать на это $('#shop-cards-1').addClass('active'); методы fadeIn() и fadeOut() но эффекта ноль...вобщем кто шарит, чекните плз, если сможете подскажите плз) https://codepen.io/drumsid/pen/YzKaPqp

Comments

[Алекс Глебов]

в бутстрапе есть вкладки
https://getbootstrap.com/docs/4.0/components/navs/...

[Ankhena]

Как вы себе представляете промежуточные состояния между none и block? Вот уже немножко не none и потихонечку block?

display не анимируется.

Анимируйте то, что можно: transform, position, height, opacity и т.д.
Либо используйте toggle, show, hide, slideDown и т.д. в JQ jquery.page2page.ru/index.php5/%D0%AD%D1%84%D1%84%...

p.s.
а если 100 элементов? Будут 100 функций писать и в каждой по 200 id перечислять?

$('#shop-cards-1').addClass('active');
          $('#shop-cards-2').removeClass('active');
          $('#shop-cards-3').removeClass('active');
          $('#shop-cards-4').removeClass('active');
          $('#shop-cards-5').removeClass('active');
          $('#a-1').addClass('active-color');
          $('#a-2').removeClass('active-color');
          $('#a-3').removeClass('active-color');
          $('#a-4').removeClass('active-color');
          $('#a-5').removeClass('active-color');

Пишите через селекторы по классам и родственные отношения.
Если никак, то связь по номеру в id. Взять цифру из кликнутого и получить соответствующий элемент из тех, которые показать.

Answer 1

[Михаил]

display не анимируется
https://www.quackit.com/css/css3/animations/animat...