При переключении табов добавить анимацию как это сделать?
Как добавить анимацию на сайте как тут
https://www.technopark.ru/portativnaya-akustika-ya...
Вот js код
"use strict" class Tabs { constructor(selector, options) { let defaultOptions = { isChanged: () => {} } this.options = Object.assign(defaultOptions, options); this.selector = selector; this.tabs = document.querySelector(`[data-tabs="${selector}"]`); // tabs-product - если не будет рабоаать то сюжа переместить дату if (this.tabs) { this.tabList = this.tabs.querySelector('.tabs__nav'); this.tabsBtns = this.tabList.querySelectorAll('.tabs__nav-btn'); this.tabsPanels = this.tabs.querySelectorAll('.tabs__panel'); } else { // console.error('Селектор data-tabs не существует!'); return; } this.check(); this.init(); this.events(); } check() { if (document.querySelectorAll(`[data-tabs="${this.selector}"]`).length > 1) { console.error('Количество элементов с одинаковым data-tabs больше одного!'); return; } if (this.tabsBtns.length !== this.tabsPanels.length) { console.error('Количество кнопок и элементов табов не совпадает!'); return; } } init() { this.tabList.setAttribute('role', 'tablist'); this.tabsBtns.forEach((el, i) => { el.setAttribute('role', 'tab'); el.setAttribute('tabindex', '-1'); el.setAttribute('id', `${this.selector}${i + 1}`); el.classList.remove('tabs__nav-btn_active'); }); this.tabsPanels.forEach((el, i) => { el.setAttribute('role', 'tabpanel'); el.setAttribute('tabindex', '-1'); el.setAttribute('aria-labelledby', this.tabsBtns[i].id); el.classList.remove('tabs__panel_active'); }); this.tabsBtns[0].classList.add('tabs__nav-btn_active'); this.tabsBtns[0].removeAttribute('tabindex'); this.tabsBtns[0].setAttribute('aria-selected', 'true'); this.tabsPanels[0].classList.add('tabs__panel_active'); } events() { this.tabsBtns.forEach((el, i) => { el.addEventListener('click', (e) => { let currentTab = this.tabList.querySelector('[aria-selected]'); if (e.currentTarget !== currentTab) { this.switchTabs(e.currentTarget, currentTab); } }); el.addEventListener('keydown', (e) => { let index = Array.prototype.indexOf.call(this.tabsBtns, e.currentTarget); let dir = null; if (e.which === 37) { dir = index - 1; } else if (e.which === 39) { dir = index + 1; } else if (e.which === 40) { dir = 'down'; } else { dir = null; } if (dir !== null) { if (dir === 'down') { this.tabsPanels[i].focus(); } else if (this.tabsBtns[dir]) { this.switchTabs(this.tabsBtns[dir], e.currentTarget); } } }); }); } switchTabs(newTab, oldTab = this.tabs.querySelector('[aria-selected]')) { newTab.focus(); newTab.removeAttribute('tabindex'); newTab.setAttribute('aria-selected', 'true'); oldTab.removeAttribute('aria-selected'); oldTab.setAttribute('tabindex', '-1'); let index = Array.prototype.indexOf.call(this.tabsBtns, newTab); let oldIndex = Array.prototype.indexOf.call(this.tabsBtns, oldTab); this.tabsPanels[oldIndex].classList.remove('tabs__panel_active'); this.tabsPanels[index].classList.add('tabs__panel_active'); this.tabsBtns[oldIndex].classList.remove('tabs__nav-btn_active'); this.tabsBtns[index].classList.add('tabs__nav-btn_active'); this.options.isChanged(this); } } |
"use strict" class Tabs { constructor(selector, options) { let defaultOptions = { isChanged: () => {} } this.options = Object.assign(defaultOptions, options); this.selector = selector; this.tabs = document.querySelector(`[data-tabs="${selector}"]`); // tabs-product - если не будет рабоаать то сюжа переместить дату if (this.tabs) { this.tabList = this.tabs.querySelector('.tabs__nav'); this.tabsBtns = this.tabList.querySelectorAll('.tabs__nav-btn'); this.tabsPanels = this.tabs.querySelectorAll('.tabs__panel'); } else { // console.error('Селектор data-tabs не существует!'); return; } this.check(); this.init(); this.events(); } check() { if (document.querySelectorAll(`[data-tabs="${this.selector}"]`).length > 1) { console.error('Количество элементов с одинаковым data-tabs больше одного!'); return; } if (this.tabsBtns.length !== this.tabsPanels.length) { console.error('Количество кнопок и элементов табов не совпадает!'); return; } } init() { this.tabList.setAttribute('role', 'tablist'); this.tabsBtns.forEach((el, i) => { el.setAttribute('role', 'tab'); el.setAttribute('tabindex', '-1'); el.setAttribute('id', `${this.selector}${i + 1}`); el.classList.remove('tabs__nav-btn_active'); }); this.tabsPanels.forEach((el, i) => { el.setAttribute('role', 'tabpanel'); el.setAttribute('tabindex', '-1'); el.setAttribute('aria-labelledby', this.tabsBtns[i].id); el.classList.remove('tabs__panel_active'); }); this.tabsBtns[0].classList.add('tabs__nav-btn_active'); this.tabsBtns[0].removeAttribute('tabindex'); this.tabsBtns[0].setAttribute('aria-selected', 'true'); this.tabsPanels[0].classList.add('tabs__panel_active'); } events() { this.tabsBtns.forEach((el, i) => { el.addEventListener('click', (e) => { let currentTab = this.tabList.querySelector('[aria-selected]'); if (e.currentTarget !== currentTab) { this.switchTabs(e.currentTarget, currentTab); } }); el.addEventListener('keydown', (e) => { let index = Array.prototype.indexOf.call(this.tabsBtns, e.currentTarget); let dir = null; if (e.which === 37) { dir = index - 1; } else if (e.which === 39) { dir = index + 1; } else if (e.which === 40) { dir = 'down'; } else { dir = null; } if (dir !== null) { if (dir === 'down') { this.tabsPanels[i].focus(); } else if (this.tabsBtns[dir]) { this.switchTabs(this.tabsBtns[dir], e.currentTarget); } } }); }); } switchTabs(newTab, oldTab = this.tabs.querySelector('[aria-selected]')) { newTab.focus(); newTab.removeAttribute('tabindex'); newTab.setAttribute('aria-selected', 'true'); oldTab.removeAttribute('aria-selected'); oldTab.setAttribute('tabindex', '-1'); let index = Array.prototype.indexOf.call(this.tabsBtns, newTab); let oldIndex = Array.prototype.indexOf.call(this.tabsBtns, oldTab); this.tabsPanels[oldIndex].classList.remove('tabs__panel_active'); this.tabsPanels[index].classList.add('tabs__panel_active'); this.tabsBtns[oldIndex].classList.remove('tabs__nav-btn_active'); this.tabsBtns[index].classList.add('tabs__nav-btn_active'); this.options.isChanged(this); } }
Дополнительно:
Слишком расплывчатый вопрос. Какая именно анимация с сайта вас интересует. Там происходит предзагрузка новых данны, а перед этим отображается загрузка.
Переключение между этими блоками
На body opasity или bacground затемняют
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для добавления анимации при переключении табов на веб-странице можно использовать различные методы, такие как CSS transitions, CSS animations или JavaScript. В данном случае, я расскажу как это можно сделать с помощью CSS transitions.
Прежде всего, нужно добавить классы для табов и контента, которые будут переключаться. Например, у нас есть три таба с классом "tab" и соответствующими блоками контента с классом "tab-content". При клике на таб, мы будем добавлять класс "active" к выбранному табу и его контенту.
HTML структура может выглядеть примерно так:
<div class="tab" data-tab="1">Tab 1</div> <div class="tab" data-tab="2">Tab 2</div> <div class="tab" data-tab="3">Tab 3</div> <div class="tab-content" data-tab="1">Content 1</div> <div class="tab-content" data-tab="2">Content 2</div> <div class="tab-content" data-tab="3">Content 3</div>
Теперь добавим стили для анимации переключения табов:
.tab-content { display: none; transition: all 0.3s ease; } .tab-content.active { display: block; }
И напишем JavaScript код для обработки кликов на табах:
document.addEventListener('DOMContentLoaded', function() { const tabs = document.querySelectorAll('.tab'); const tabContents = document.querySelectorAll('.tab-content'); tabs.forEach(tab => { tab.addEventListener('click', () => { const tabId = tab.getAttribute('data-tab'); tabs.forEach(item => { item.classList.remove('active'); }); tabContents.forEach(content => { content.classList.remove('active'); if (content.getAttribute('data-tab') === tabId) { content.classList.add('active'); } }); tab.classList.add('active'); }); }); });
Теперь при клике на табы они будут переключаться с анимацией благодаря CSS transitions. Вы можете настроить стили и анимацию по своему усмотрению, добавив дополнительные свойства CSS или используя CSS animations.