Question

问题在于，当slideToggle（）为span标签设置动画时，没有正确的文本换行。只有动画结束后，span内容才能正确包装。

我正在尝试使用jQuery在按钮上添加更多内容。不只是把它放进去，而是有一些动画，比如slideToggle（）提供的。

是否有针对此的修复或如何以稍微不同的方式实现它以避免内容在动画期间不包装。

以下是一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

跳跃存在是因为为了给幻灯片设置动画，跨度必须有一个高度，但如果它是display: inline-block或display: block它只能有一个高度，这意味着它也会有一个高度宽度。你可以看到jQuery正在为元素的style属性添加display: inline-block，同时它是动画的。动画完成后，jQuery会删除样式属性，然后返回到先前的布局，即内联。

我不知道你的用例是什么或者哪些部分很重要（例如幻灯片动画是重要的部分还是仅仅是动画的内容？必须以句子结尾？是两行？等等）。以下是一些可能为您提供一些探索想法的示例。

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

第二个示例使用不透明度并将动画设置为在单击切换时淡入/淡出文本。隐藏的文本仍然占用空间，所以如果你不想这样，你可以使用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（）动画期间跨度文本换行问题

1 个答案: