Question

我正在使用Bootstrap 4 Tab-widget。

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

＆＃13;

.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);
  }
}

＆＃13;

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

＆＃13;

为什么使用此解决方案所有选项卡都来自左侧？任何帮助表示赞赏

Answer 1

只要您点击新标签页，该标签的.tab-pane元素就会变为.tab-pane.active，这意味着它会丢失CSS以使其动画显示正确（因为它不再是＆＃34;在＆＃34;活动标签窗格之后， IS 活动标签窗格）。

我不确定如果不将动画与活动标签分开，您可以实现您的目标（因为您使用的动画并不取决于当前哪个标签处于活动状态，取决于单击当前选项卡时，哪个选项卡处于活动状态，并且仅使用CSS无法做到这一点。

一种可能的解决方案是指定每个选项卡应使用哪个动画，并在每次单击新选项卡时更新该选项卡。下面的示例为每个data-anim元素添加.tab-pane属性，并在每次＆＃34;滑动＆＃34;时更新该属性。动画结束（＆＃34;动画结束后＃34;是重要的部分 - 如果我们在点击标签时立即更改它，那么CSS将立即开始使用新动画）。希望它有所帮助。

＆＃13;

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();

＆＃13;

.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);
  }
}

＆＃13;

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

＆＃13;

CSS兄弟选择器不使用转换

1 个答案: