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

Question

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

选项卡本身的高度各不相同，我发现当我激活一个整体高度较小的选项卡时，浏览器会捕捉到较小的页面高度，这让我很不舒服(页面向下滚动(。

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

看看我的小提琴。

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，它似乎是为了与Modals一起使用。您可能已经自己定义了它，并且不知道bootstrap也有一个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">