Проблема с переносом текста во время анимации slideToggle()

Question

Проблема в том, что пока функция slideToggle() анимирует, теги span не имеют надлежащего переноса текста. Только после того, как анимация заканчивается, содержимое диапазона корректно упаковывается.

Я пытаюсь добавить больше контента при нажатии кнопки с помощью jQuery. Не просто добавьте его, а используйте некоторую анимацию, например, которую предоставляет slideToggle().

Есть ли исправление для этого или как я могу реализовать его немного по-другому, чтобы избежать не оборачивания содержимого во время анимации.

Вот пример:

$('.toggle').click(function() {
 $('.moreContent').slideToggle();
});

p {
  max-width: 300px;
}
.hide {
  display: none;
}

<p>
  <span><strong>List: </strong></span>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque, beatae.
  <span class="hide moreContent">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit voluptate consequuntur corporis sint sequi quam maxime eius iusto perspiciatis.</span>
  <br>
  <br>
  <button class="toggle">Toggle</button>
</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 1

Прыжок существует, потому что для анимации слайда пролет должен иметь высоту, но он может иметь высоту, только если он display: inline-block или же display: block, что означает, что он также будет иметь ширину. Вы можете видеть, что jQuery добавляет display: inline-block к атрибуту стиля элемента, пока он анимирован. Когда анимация завершена, jQuery удаляет атрибут style и возвращается к предыдущему макету, то есть встроенному.

Я не знаю, какой у вас сценарий использования или какие части важны (например, является ли анимация слайдов важной частью или просто что-то анимируется? Должно ли это заканчиваться на предложении? Будь две строки? И т.д. и т. Д.). Ниже приведено несколько примеров, которые могут дать вам некоторые идеи для изучения.

Во-первых, вместо того, чтобы полагаться на jQuery для обработки анимации, вы можете использовать его для переключения класса и определения анимации в CSS. Первый пример устанавливает высоту контейнера максимум 2em и overflow: hidden (поэтому будут показаны 2 строки, а остальные скрыты). Затем, нажав на кнопку переключения, класс переключается, и когда .show_all класс добавлен, он оживляет max-height свойство, которое приводит к анимации слайдов. Максимальная высота должна быть достаточно большой, чтобы показывать содержимое контейнера. Если он сильно изменчив, вы можете установить его на некоторое большое число (так как оно не будет занимать место, если это не нужно). Тем не менее, вам может понадобиться настроить номера анимации.

Во втором примере используется прозрачность и задается анимация для постепенного исчезновения текста при нажатии на переключатель. Скрытый текст по-прежнему занимает место, поэтому, если вы этого не хотите, вы можете поиграть с CSS, чтобы обойти это. Возможно, дайте скрытому тексту отрицательный z-индекс и поиграйте с полем или положением переключателя.

Я предполагаю, что вы создали простой пример, поэтому я не хотел вдаваться в подробности, а просто хотел предложить другие способы решения проблемы.

$('.toggle').click(function() {
  $('.content').toggleClass('show_all');
});

$('.toggle-fade').click(function() {
  $('.showme').toggleClass('show_all');
});

p {
  max-width: 300px;
  line-height: 1em;
}

.content {
  max-height: 2em;
  overflow: hidden;
  display: inline-block;
  transition: max-height .5s ease-in-out;
  text-wrap: none;
}

.show_all {
  max-height: 10em;
  height: auto;
}

.showme {
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

.showme.show_all {
  opacity: 1;
}

<p>
  <span><strong>List: </strong></span>
  <span class="content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque, beatae.
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit voluptate consequuntur corporis sint sequi quam maxime eius iusto perspiciatis.</span>
  <br>
  <br>
  <button class="toggle">Toggle</button>
</p>

<p>
  <span><strong>List: </strong></span>
  <span class="shown">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque, beatae.</span>
  <span class="showme">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit voluptate consequuntur corporis sint sequi quam maxime eius iusto perspiciatis.</span>
  <br>
  <br>
  <button class="toggle-fade">Toggle</button>
</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>