Каким способом можно анимировать добавления и удаление класса через JS?
Если точнее:
У меня есть некие элементы (сразу видно 3 элемента).
После нажатия на кнопку первый элемент скрывается, при помощи удаления класса, и добавляется в конец еще один элемент, при помощи добавления класса с display:block
.
Но, всё это происходит быстро и резко. Хочется добавить какой-нибудь анимации.
Обязателен чистый JS
window.onload = function() {
let fulProject = document.querySelectorAll('.project'),
projectPrev = document.querySelector('.project__previous'),
projectNext = document.querySelector('.project__next'),
quanFulProject = fulProject.length,
quanShowProject = 3,
numActiveProject = 0
for (let i = 0; i < quanShowProject; i++) {
fulProject[i].classList.toggle("project_show")
fulProject[0].classList.toggle("project_active")
}
projectPrev.onclick = () => {
if (numActiveProject == 0) {
} else {
let projectActive = document.querySelector('.project_active')
projectActive.classList.toggle("project_active")
fulProject[numActiveProject + quanShowProject - 1].classList.toggle("project_show")
numActiveProject--
fulProject[numActiveProject].classList.toggle("project_show")
fulProject[numActiveProject].classList.toggle("project_active")
}
}
projectNext.onclick = () => {
if (numActiveProject + quanShowProject == quanFulProject) {
} else {
let projectActive = document.querySelector('.project_active')
projectActive.classList.toggle("project_show")
projectActive.classList.toggle("project_active")
fulProject[numActiveProject + quanShowProject].classList.toggle("project_show")
numActiveProject++
fulProject[numActiveProject].classList.toggle("project_active")
}
};
};
.project {
width: 100%;
display: none;
}
.project_show {
display: block;
}
<div class="project-wrapper">
<div class="project">
<section class="project__elem">
<div class="project__info">
<h1 class="project__title">
<span>Mountain1.</span>
</h1>
<p class="project__description">Web page for mountain agency</p>
<a class="project__btn-detail transition btn"><span class="transition">view details</span></a>
</div>
<div class="project__preview preview">
</div>
</section>
</div>
<div class="project">
<section class="project__elem">
<div class="project__info">
<h1 class="project__title">
<span>Mountain2.</span>
</h1>
<p class="project__description">Web page for mountain agency</p>
<a class="project__btn-detail transition btn"><span class="transition">view details</span></a>
</div>
<div class="project__preview preview"></div>
</section>
</div>
<div class="project">
<section class="project__elem">
<div class="project__info">
<h1 class="project__title">
<span>Mountain3.</span>
</h1>
<p class="project__description">Web page for mountain agency</p>
<a class="project__btn-detail transition btn"><span class="transition">view details</span></a>
</div>
<div class="project__preview preview"></div>
</section>
</div>
<div class="project">
<section class="project__elem">
<div class="project__info">
<h1 class="project__title">
<span>Mountain4.</span>
</h1>
<p class="project__description">Web page for mountain agency</p>
<a class="project__btn-detail transition btn"><span class="transition">view details</span></a>
</div>
<div class="project__preview preview"></div>
</section>
</div>
<div class="project">
<section class="project__elem">
<div class="project__info">
<h1 class="project__title">
<span>Mountain5.</span>
</h1>
<p class="project__description">Web page for mountain agency</p>
<a class="project__btn-detail transition btn"><span class="transition">view details</span></a>
</div>
<div class="project__preview preview"></div>
</section>
</div>
<div class="project">
<section class="project__elem">
<div class="project__info">
<h1 class="project__title">
<span>Mountain6.</span>
</h1>
<p class="project__description">Web page for mountain agency</p>
<a class="project__btn-detail transition btn"><span class="transition">view details</span></a>
</div>
<div class="project__preview preview"></div>
</section>
</div>
<div class="project__btn-switch">
<button class="project__previous transition btn"><i class="far fa-long-arrow-left"></i></button>
<button class="project__next transition btn"><i class="far fa-long-arrow-right"></i></button>
</div>
</div>
opacity
анимируется прекрасно.