CSS псевдоэлемент перестраивается во вкладках начальной загрузки - PullRequest
Новая
       3

CSS псевдоэлемент перестраивается во вкладках начальной загрузки

1 голос
/ 15 апреля 2019

Я добавляю псевдоэлемент :: before к элементам списка, которые находятся во вкладке Bootstrap.

У псевдоэлемента есть анимация CSS, которую я могу вызвать, переключая класс.

Все работает, однако, когда я перемещаюсь между вкладками, запускается анимация CSS. Я осмотрел DOM и заметил, что все, что я переключаю, вкладки, псевдоэлементы добавляются или удаляются.

В результате анимация 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>

Любые предложения будут с благодарностью! ТИА!

1 Ответ

1 голос
/ 15 апреля 2019

Один хакерский способ состоит в том, чтобы изменить поведение вкладки начальной загрузки, и вместо переключения свойства 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...