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

Question

我创建了一个页面，页面底部有 bootstrap 个选项卡。

选项卡本身的高度各不相同，我发现当我激活总高度较小的选项卡（并且页面向下滚动到最下方）时，浏览器如何捕捉到较小的页面高度令人不快。

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

查看我的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 class 正在应用与不透明度相关的额外 css 样式。只有第二个选项卡有 .fade class，因此感觉不一致。

如果将 .fade 添加到两者，您会注意到两个转换都有延迟。

不确定为什么要添加 .fade，它似乎是要与模态框一起使用。您可能已经自己定义了它并且不知道 bootstrap 也有淡入淡出 class

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

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

Smoothly transition tab activation in Bootstrap 4

css-transitions

bootstrap-tabs

bootstrap-4