在 Bootstrap 4 中平滑过渡选项卡激活

Question

我在页面底部创建了一个带有引导选项卡的页面。

标签本身具有不同的高度，我发现当我激活一个整体高度较小的标签时（并且页面被向下滚动到很远），浏览器如何捕捉到较小的页面高度很不和谐。

在尝试了六种建议后，我最终找到了一个解决方案，让所有标签的高度相同，但我仍然希望它们之间至少有一些过渡并选择不透明度。

见我的fiddle。

HTML

<div class="consistent-height">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#tab1">tab 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tab2">tab 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <img class="logo" alt="logo" src="/static/images/logo_icon.svg">
    <div id="tab1" class="tab-pane active">
      tra la la
    </div>
    <div id="tab2" class="tab-pane fade">
      juhuhu
    </div>
  </div>
</div>

CSS

.logo {
  float:  right;
  height: 20em;
}

.tab-content {
  padding-top: 2em;
}

.consistent-height .tab-content {
  position: relative;
  transition: opacity .5s ease 0s;
}

.consistent-height .tab-content > .tab-pane {
  display:    block; /* undo "display: none;" */
  opacity:    0;
  position:   absolute;
  width:      calc(100% - 15em);
}

.consistent-height .tab-content > .active {
  opacity: 100%;
}

这几乎可以正常工作，但是当我从“选项卡 2”移动到“选项卡 1”时会有额外的延迟（与激活“选项卡 2”时的立即转换相比）。 我怀疑延迟是由重叠转换引起的，但我对它们的理解不够好，无法理解是什么困扰着浏览器。

我做错了什么？

Answer 1

.fade 类正在应用与不透明度相关的其他 css 样式。 只有第二个标签有 .fade 类，因此感觉不一致。

如果你同时添加.fade，你会注意到两个转换的延迟。

不知道你为什么添加.fade，它似乎是为了与模态一起使用。您可能自己定义了它，但不知道引导程序也有一个淡入淡出类

.tab-content {
  padding-top: 2em;
}

.consistent-height .tab-content {
  position: relative;
}

.consistent-height .tab-content>.tab-pane {
  display: block;
  opacity: 0;
  position: absolute;
  width: calc(100% - 15em);
  transition: opacity .5s ease 0s;
}

.consistent-height .tab-content>.active {
  opacity: 100%;
}

<h1> no fade </h1>
<div class="consistent-height">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#tab1">tab 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tab2">tab 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab-pane active">
      tab 1 content
    </div>
    <div id="tab2" class="tab-pane">
      tab 2 content
    </div>
  </div>
</div>

<h1><br> with fade </h1>
<div class="consistent-height">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#tab3">tab 3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tab4">tab 4</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="tab3" class="tab-pane fade active">
      tab 3 content
    </div>
    <div id="tab4" class="tab-pane fade">
      tab 4 content
    </div>
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">