如何在活动选项卡窗格中添加淡出效果?

我使用基本的Bootstrap 5.3与基本药丸和标签结构。如何在选定选项卡的淡出之前简单地将淡出添加到活动选项卡?

好像加了"fade"类只添加了一个fadeIn，我希望活动选项卡在。

到目前为止，我发现的唯一方法是重写整个机制，并做一个jQuery淡出淡出。我希望我能使用更多的标准代码…

请帮忙好吗?

谢谢!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

您可以这样做。注释在示例下面。

这个例子本身是这样发布的(而不是在代码片段编辑器中把它分成适当的部分)，因为在让它像现在这样工作时存在问题。我怀疑这与外部文件在SO上加载的方式有关。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello, world!</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style>
.tab-content {
position: relative;
}
.tab-content > .tab-pane {
display: unset;
position: absolute;
left: 0;
opacity: 0;
transition: opacity 2s;
}
.tab-content > .tab-pane.active {
opacity: 1;
}
.tab-pane > div {
width: 200px;
height: 200px;
margin: 15px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.purple {
background-color: purple;
}
</style>
</head>
<body>
<div class="container">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
<div class="red">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer ...</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
<div class="blue">... took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining ...</div>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
<div class="yellow">... essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing...</div>
</div>
<div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">
<div class="purple">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script>
const pills = document.querySelectorAll("button.nav-link");
const tabs = document.querySelectorAll(".tab-pane");
for(var i = 0; i < pills.length; i++) {
pills[i].addEventListener("click", function(event) {
let contentId = event.target.getAttribute("id").replaceAll("-tab","");
let elemTab = document.getElementById(contentId);
for(var j = 0; j < tabs.length; j++) {
tabs[j].classList.remove("active");
}
if(elemTab) {
elemTab.classList.add("active");
}
});
}
</script>
</body>
</html>

一些注意事项/YMMV/一般注意事项:

药丸/菜单按钮内的data-bs-target已被清空，以防止默认的引导行为。这可能会导致一些问题以后，如果你依赖的行为不再工作，因为它曾经默认
将所有.tab-pane项的定位设置为absolute，实现重叠。同样，这可能不适合您和您的特定用例，特别是如果您的选项卡下面有额外的内容(页脚、滑块、文本块等)。在这种情况下，您必须将选项卡内容放置在容器中，并且可能定义一个固定的高度(具有溢出和针对不同分辨率的可选更改)
而不是默认方式Bootstrap处理这个(见CSS规则/源.fade:not(.show)和.tab-content > .tab-pane在初始Bootstrap设置)，这个解决方案/建议适用于不透明度
的附加CSS，在你的情况下，重要的事情是前三个CSS规则。即:

.tab-content {
position: relative;
}
.tab-content > .tab-pane {
display: unset;
position: absolute;
left: 0;
opacity: 0;
transition: opacity 2s;
}
.tab-content > .tab-pane.active {
opacity: 1;
}

相关内容

最新更新

热门标签：