CSS同级选择器不适用于转换

Question

我使用的是Bootstrap 4 Tab-widget。

活动选项卡右侧的选项卡窗格应从右侧滑入。活动选项卡左侧的选项卡窗格应从左侧滑入。

​

.tab-pane.active~.tab-pane {
  animation: slide-right .5s ease-out;
}

.tab-pane {
  animation: slide-left .5s ease-out;
}

@keyframes slide-right {
  0% {
    opacity: .8;
    transform: translateX(300%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-left {
  0% {
    opacity: .7;
    transform: translateX(-300%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<div class="container">

  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" href="#overview" role="tab" data-toggle="tab">Overview</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#information" role="tab" data-toggle="tab">Information</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#downloads" role="tab" data-toggle="tab">Downloads</a>
    </li>
  </ul>
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane show active" id="overview">
      // content on tab
    </div>
    <div role="tabpanel" class="tab-pane" id="information">
      // content on tab
    </div>
    <div role="tabpanel" class="tab-pane" id="downloads">
      // content on tab
    </div>
  </div>

</div>

​

为什么使用此解决方案时，所有选项卡都来自左侧？任何帮助我们都将不胜感激

Answer 1

一旦你点击一个新的标签，该标签的.tab-pane元素就变成了.tab-pane.active，这意味着它失去了从右边开始动画的CSS (因为它不再是活动标签窗格的“之后”，它是活动标签窗格)。

如果不将动画从活动选项卡中分离出来，我不确定您是否能实现您想要的效果(因为您使用的动画并不依赖于当前活动的选项卡，它取决于当前选项卡被单击时活动的选项卡，只使用CSS没有好的方法来做到这一点。

一种可能的解决方案是指定每个选项卡应使用的动画，并在每次单击新选项卡时更新该动画。下面的示例将一个data-anim属性添加到每个.tab-pane元素，并在“幻灯片”动画结束时更新该属性(“动画结束后”是重要的部分-如果我们在单击选项卡时立即更改它，则CSS将立即开始使用新动画)。希望这能对你有所帮助。

​

var $tabPanels = $('.tab-content');
function setAnimations() {
  var isAfter = false;
  $tabPanels.children('.tab-pane').each(function(i, el) {
    if (isAfter) el.setAttribute('data-anim', 'right');
    else if (el.classList.contains('active')) {
      isAfter = true;
      el.setAttribute('data-anim', '');
    }
    else el.setAttribute('data-anim', 'left');
  });
}
$tabPanels.on('animationend', setAnimations);
setAnimations();

.tab-pane[data-anim="left"] {
  animation: slide-left .5s ease-out;
}

.tab-pane[data-anim="right"] {
  animation: slide-right .5s ease-out;
}


@keyframes slide-right {
  0% {
    opacity: .8;
    transform: translateX(300%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-left {
  0% {
    opacity: .7;
    transform: translateX(-300%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<div class="container">

  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" href="#overview" role="tab" data-toggle="tab">Overview</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#information" role="tab" data-toggle="tab">Information</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#downloads" role="tab" data-toggle="tab">Downloads</a>
    </li>
  </ul>
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane show active" id="overview">
      // content on tab
    </div>
    <div role="tabpanel" class="tab-pane" id="information">
      // content on tab
    </div>
    <div role="tabpanel" class="tab-pane" id="downloads">
      // content on tab
    </div>
  </div>

</div>

​