1

Каким способом можно анимировать добавления и удаление класса через 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>

6
  • @UModeL, В html документе находятся несколько идентичных элементов (пусть будет 10, сколь вам угодно). Но изначально видимы из них только 3, у всех остальных display none. Также есть кнопки, по нажатию на которые будет добавляться\удаляться класс с display block
    – user399759
    5 окт 2020 в 15:48
  • opacity, display не анимируется
    – ThisMan
    5 окт 2020 в 15:49
  • @ThisMan: opacity анимируется прекрасно.
    – UModeL
    5 окт 2020 в 15:50
  • @AlexandrKorzh: приложите код с которым у Вас проблема. Иначе набегут, заминусуют и закроют вопрос, а Вы без ответа останетесь.
    – UModeL
    5 окт 2020 в 15:52
  • 1
    @UModeL, добавил
    – user399759
    5 окт 2020 в 15:54

1 ответ 1

1

Вариантов может быть множество. Вот один из них:

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 {
  height: 0px;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  transition: height .5s ease .5s, opacity .5s ease;
}

.project_show {
  height: 140px;
  opacity: 1;
  transition: height .5s ease .5s, opacity .5s ease;
}
<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">previous</i></button>
    <button class="project__next transition btn"><i class="far fa-long-arrow-right">next</i></button>
  </div>
</div>

JS не затрагивался, добавлены только свойства в CSS.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.