Question

我的bootstrap 3有问题。

文件说：使用“tab-pane fade”类淡出选项卡之间的过渡。所以我的代码看起来像这样：

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

淡入淡出过渡工作正常。但问题是内容取决于它的大小会产生明显的跳跃效果。

我知道bootstrap有一个类“折叠”，手风琴用于手风琴内容的扩展/折叠动画。

问题是我希望在标签内容之间保存淡入淡出过渡，并且当我在标签之间切换时，还会使标签内容展开和折叠。

目前的实现是在protasov.by/service 在这个页面上有4个导航丸，它们在切换之间淡入淡出，这些选项卡里面有表格，我的想法是让标签内容在不同尺寸之间折叠/展开动画然后淡入显示拉伸内容。

如何向该标签添加“崩溃”显示/隐藏行为？

提前致谢！

带有展开/折叠内容的bootstrap nav-pills

0 个答案: