При переключении табов добавить анимацию как это сделать?

Чтобы добавить анимацию при переключении табов в JavaScript, существует несколько подходов. Один из самых простых способов - использовать CSS Transition и добавить соответствующие классы при переключении.

Во-первых, создайте классы в CSS для анимации. Например, для анимации появления и исчезновения табов можно использовать следующие два класса:

.tab {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.tab.active {
  opacity: 1;
}

Здесь tab - это класс, применяемый ко всем табам, а active - класс, применяемый только к активному табу.

Затем в JavaScript вы можете добавить соответствующие обработчики событий при переключении табов. Например, предположим, что у вас есть HTML-элементы для каждого таба с классом tab и вы хотите, чтобы при клике на таб он становился активным:

const tabs = document.querySelectorAll('.tab');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // Уберите активные классы у всех табов
    tabs.forEach(tab => tab.classList.remove('active'));
    
    // Добавьте активный класс только кликнутому табу
    tab.classList.add('active');
  });
});

Этот код добавляет обработчик клика для каждого таба. При клике он просто удаляет класс active у всех табов и добавляет его только кликнутому табу.

Теперь, когда у вас есть анимационные классы и обработчики событий, когда таб переключается, вы должны увидеть анимацию плавного появления и исчезновения каждого таба. Благодаря CSS Transitions, это будет выглядеть гладко и эффективно.

Конечно, это только один пример добавления анимации при переключении табов в JavaScript. Есть множество других способов, зависящих от ваших потребностей - вы можете использовать CSS Animations вместо CSS Transitions, использовать JavaScript-библиотеки анимации, или даже создать собственные анимации с помощью JavaScript и CSS. Все зависит от ваших предпочтений и требований проекта.