slideToggle() 动画期间出现跨文本换行问题

Question

问题是，当 slideToggle() 正在动画时，span 标签没有正确的文本换行。只有在动画完成后，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 删除样式属性并返回到之前的布局，即内联。

我不知道您的用例是什么或哪些部分很重要（例如，幻灯片动画是重要部分还是仅仅是动画中的某些内容？它必须以一句话结尾吗？是两行吗？等等， ETC）。下面是几个示例，可能会给您一些探索的想法。

首先，您可以使用它来切换 class 并在 CSS 中定义动画，而不是依赖 jQuery 来处理动画。第一个示例将容器高度设置为最大值 2em 和 overflow: hidden（因此将显示 2 行，其余隐藏）。然后，单击切换按钮切换 class，当添加 .show_all class 时，它会激活 max-height 属性，从而产生幻灯片动画。 max-height 只需要足够大以显示容器中可能包含的任何内容。如果它变化很大，你可以将它设置为一些大的数字（因为它不会占用 space 除非它需要它）。但是，您可能需要调整动画数量。

第二个示例使用不透明度并设置动画以在单击切换时淡化文本 in/out。隐藏文本仍然占用 space，所以如果您不想这样，您可以使用 CSS 来解决这个问题。也许给隐藏文本一个负数 z-index 并调整切换按钮的边距或位置。

我假设你已经建立了一个简单的例子，所以我不想过多地了解细节，只是想提供一些其他的解决问题的方法。

$('.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>

slideToggle() 动画期间出现跨文本换行问题

Span text wrap issue during slideToggle() animation

html

javascript

css

jquery

slidetoggle