Question

我正在将:: 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！

Answer 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>

CSS伪元素在引导选项卡中重建

1 个答案: