我正在将:: before伪元素添加到列出位于“引导程序”选项卡中的项目元素。
伪元素具有一个CSS动画,可以通过切换类来触发该动画。
一切正常,但是,当我在选项卡之间移动时,会触发CSS动画。 我检查了DOM,发现所有我切换选项卡的东西,伪元素都被添加或删除了。
这将导致每次打开带有列表的选项卡时都播放css动画。我不希望这种情况发生。
我不明白为什么会这样。即使CSS选项卡不可见,也不应将CSS应用于列表项吗? 打开标签页后如何停止播放CSS动画?
.myList {
list-style: none;
}
.myList .state-in {
position: relative;
}
.state-in::before {
content: '';
position: absolute;
left: -30px;
top: 1px;
width: calc(100% + 40px);
height: 24px;
animation: takeInFade 1s ease-in-out;
}
@keyframes takeInFade {
0% { background-color: transparent; }
30% { background-color: #466d2a; }
100% { background-color: transparent; }
}
@keyframes takeOutFade {
0% { background-color: transparent; }
30% { background-color: #7b2d2a; }
100% { background-color: transparent; }
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Tab One</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Tab Two</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<ul class="myList">
<li class="state-in">Item One</li>
<li class="state-in">Item Two</li>
<li class="state-in">Item Three</li>
</ul>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Tab Two Content
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
任何建议将不胜感激! TIA!
答案 0 :(得分:1)
一种 hacky 方法是更改引导程序选项卡的行为,而不是切换display
属性,您可以将位置更改为绝对,将不透明度更改为0。
这是代码的相关部分
.tab-content>.tab-pane {
display: block!important;
position:absolute;
opacity:0;
}
.tab-content>.active {
display: block;
opacity:1;
position:relative;
}
完整代码:
.myList {
list-style: none;
}
.myList .state-in {
position: relative;
}
.state-in::before {
content: '';
position: absolute;
left: -30px;
top: 1px;
right:0;
height: 24px;
animation: takeInFade 1s ease-in-out;
}
@keyframes takeInFade {
0% { background-color: transparent; }
30% { background-color: #466d2a; }
100% { background-color: transparent; }
}
@keyframes takeOutFade {
0% { background-color: transparent; }
30% { background-color: #7b2d2a; }
100% { background-color: transparent; }
}
/**/
.tab-content>.tab-pane {
display: block!important;
position:absolute;
opacity:0;
}
.tab-content>.active {
display: block;
opacity:1;
position:relative;
}
/**/
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Tab One</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Tab Two</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<ul class="myList">
<li class="state-in">Item One</li>
<li class="state-in">Item Two</li>
<li class="state-in">Item Three</li>
</ul>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Tab Two Content
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>