Блог

Главная - Вопросы по программированию - Проблема с порядком анимации перехода CSS для аккордеона

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

#javascript #css #dom #css-transitions

#javascript #css #dom #css-переходы

Вопрос:

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

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

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

 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>

Комментарии:

1. Я думаю, что вам просто нужно что-то сделать, чтобы ускорить затухание. Я не слишком разбираюсь в CSS-материалах, поэтому я не буду предоставлять вам какой-либо код, кроме того, где я бы его искал. Для меня это, похоже, работает нормально. Анимации начинаются одновременно. Просто выглядит странно, потому что div не изменит свой размер до того, как весь текст полностью исчезнет.

2. думаю, вы справились с этим, это выглядит странно, не так ли. Я хочу, чтобы он одновременно исчезал и скользил вверх, это ожидаемое поведение. Так что не совсем уверен, почему кажется, что он исчезает, а затем сдвигается вверх по высоте контейнера div… интересно, является ли это проблемой реализации (вероятно) или ошибкой CSS?

3. ДА. Ожидается, что сначала он полностью исчезает, а затем изменяется, потому что из-за этого текст все еще будет исчезать, и это будет выглядеть еще более странно.

4. Вы могли бы удалить некоторый текст из innerText вашего поля, чтобы уменьшить его размер, но вам пришлось бы поиграть с setInterval() и рассчитать время почти идеально, что было бы очень сложно сделать. Особенно при рассмотрении разных размеров окна просмотра, что может привести к всевозможным отклонениям от размера.

5. Конечно, у вас будет резервная копия текста, сохраненная где-нибудь в вашем коде, чтобы восстановить его при необходимости.