Как добавить плавность при переключении вкладок?

Question

[Руслан Дасаев]

Как добавить плавность при переключении вкладок?

Что я делаю не так или не дописал?

Answer 1

[0xD34F]

Вы добавляете скрываемому элементу класс, переключающий свойство display, одновременно с классом, который задаёт изменение прозрачности - поэтому пронаблюдать последнее вы не успеваете. Переключайте display после того, как анимация будет завершена - для этого можно подписаться на событие transitionend:

const $headers = $('.callback-list__item');
const $content = $('.callback-content__item');
$content.slice(1).addClass('hidden delete');

$(document).on('click', '.callback-list__item:not(.callback-list--active)', function() {
  $headers
    .removeClass('callback-list--active')
    .filter(this)
    .addClass('callback-list--active');

  const i = $headers.index(this);
  $content
    .not('.delete')
    .addClass('hidden')
    .one('transitionend', function() {
      $(this).addClass('delete');
      const $item = $content.eq(i).removeClass('delete');
      setTimeout(() => $item.removeClass('hidden'), 0);
    });
});