Проблема порядка анимации переходов CSS для аккордеона - PullRequest
Новая
       19

Проблема порядка анимации переходов CSS для аккордеона

0 голосов
/ 05 апреля 2019

Ниже приведены два поля div с заголовками <h4> и текст <p>.В стиле аккордеона, я хочу щелкнуть каждый заголовок и увидеть текст, я сделал это, установив поле контейнера для текста div на max-height: 0; и opacity: 0;, затем max height значение и непрозрачность 1 при клике.

Моя проблема в том, что я ожидаю, что анимация будет происходить одновременно для обоих блоков (один скользит вверх и скрывается, другой скользит вниз и появляется), однако анимация запущеначтобы скользить вверх и исчезнуть, переместиться вниз и появиться.

Как я могу получить их обоих одновременно?

document.addEventListener('DOMContentLoaded', function() {

  // main click handler for the whole page
  document.addEventListener('click', function(event) {

    var clickedElem = event.target;

    if (clickedElem.matches(".slide-card h4")) {

      var activeCards = document.querySelectorAll(".card-active");

      if (activeCards) {
        for (var i = 0; i < activeCards.length; i++) {
          if (activeCards[i]) toggle(activeCards[i], "card-active");
        }
      }

      toggle(clickedElem.parentNode, "card-active");
    }
  });
});


function toggle(el, elClass) {
  if (el.matches("." + elClass)) {
    el.classList.remove(elClass);
  } else {
    el.classList.add(elClass);
  }
}
h4 {
  cursor: pointer !important;
}

.slide-card {
  border: 1px solid white;
  padding: 1em;
}

.animated-slides-cards {
  background: pink;
  padding: 1em;
}

.card-body {
  opacity: 0;
  max-height: 0;
  transition: all 0.75s ease-out;
}

.card-active .card-body {
  opacity: 1;
  max-height: 400px;
}
<div class="animated-slides-cards">
  <div data="0" class="slide-card block-padding margin-bottom-05x card-active">
    <h4 class="blue">Harness the power of the crowd</h4>
    <div class="grey card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis eros vitae metus sodales eget suscipit purus rhoncus. Proin ultrices gravida dolor, non porttitor enim interdum vitae. Integer feugiat lacinia tincidunt. Nulla laoreet tristique
        tristique. Sed elementum justo a nisl elementum sit amet accumsan nisi tempor. Nulla quis eros et massa dignissim imperdiet a vitae purus.</p>
    </div>
  </div>
  <div data="1" class="slide-card block-padding margin-bottom-05x">
    <h4 class="blue">Slots straight into your systems</h4>
    <div class="grey card-body">
      <p>Using simple APIs, SmartCrowd™ connects to your systems and allocates tasks to ambassadors using your existing digital channels. You can opt for full integration or simply use Limitless Live Messenger on your website to maintain a single customer
        view.</p>
    </div>
  </div>
</div>
...