javascript - Bootstrap 标签动画

Question

我试图通过添加 css 类来为 Bootstrap 选项卡制作动画，但它不起作用，简单的想法是基于 Bootstrap 类 .active 为选项卡内容设置动画，问题是转换不起作用:

.tab-content .tab-pane h3 {
  opacity: 0;
  -moz-transform: translate(-10px, -10px) rotate(30deg);
  -ms-transform: translate(-10px, -10px) rotate(30deg);
  -o-transform: translate(-10px, -10px) rotate(30deg);
  -webkit-transform: translate(-10px, -10px) rotate(30deg);
  transform: translate(-10px, -10px) rotate(30deg);
  transition: all .5s ease-in-out;
}

.tab-content .active h3 {
  opacity: 1;
  transform: translate(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="exTab1" class="container">
  <ul class="nav nav-pills">
    <li class="active">
      <a href="#1a" data-toggle="tab">Overview</a>
    </li>
    <li><a href="#2a" data-toggle="tab">Using nav-pills</a>
    </li>
    <li><a href="#3a" data-toggle="tab">Applying clearfix</a>
    </li>
    <li><a href="#4a" data-toggle="tab">Background color</a>
    </li>
  </ul>

  <div class="tab-content clearfix">
    <div class="tab-pane active" id="1a">
      <h3>Content's background color is the same for the tab</h3>
    </div>
    <div class="tab-pane" id="2a">
      <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
    </div>
    <div class="tab-pane" id="3a">
      <h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
    </div>
    <div class="tab-pane" id="4a">
      <h3>We use css to change the background color of the content to be equal to the tab</h3>
    </div>
  </div>
</div>

Answer 1

您不能在display:block 和display:none 之间使用转换，您需要将display:block 设置为。 tab-content>.tab-pane.

 #exTab1 .tab-content {
  overflow: hidden;
 }

 #exTab1>.tab-content>.tab-pane {
  display: block;
  position: absolute;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<style>
  .tab-content .tab-pane h3 {
    opacity: 0;
    -moz-transform: translate(-10px, -10px) rotate(30deg);
    -ms-transform: translate(-10px, -10px) rotate(30deg);
    -o-transform: translate(-10px, -10px) rotate(30deg);
    -webkit-transform: translate(-10px, -10px) rotate(30deg);
    transform: translate(-10px, -10px) rotate(30deg);
    transition: all .5s ease-in-out;
  }
  
  .tab-content .active h3 {
    opacity: 1;
    transform: translate(0);
  }
  
  #exTab1 .tab-content {
    overflow: hidden;
  }
  
  #exTab1>.tab-content>.tab-pane {
    display: block;
    position: absolute;
    overflow: hidden;
  }
</style>

<div id="exTab1" class="container">
  <ul class="nav nav-pills">
    <li class="active">
      <a href="#1a" data-toggle="tab">Overview</a>
    </li>
    <li><a href="#2a" data-toggle="tab">Using nav-pills</a>
    </li>
    <li><a href="#3a" data-toggle="tab">Applying clearfix</a>
    </li>
    <li><a href="#4a" data-toggle="tab">Background color</a>
    </li>
  </ul>

  <div class="tab-content clearfix">
    <div class="tab-pane active" id="1a">
      <h3>Content's background color is the same for the tab</h3>
    </div>
    <div class="tab-pane" id="2a">
      <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
    </div>
    <div class="tab-pane" id="3a">
      <h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
    </div>
    <div class="tab-pane" id="4a">
      <h3>We use css to change the background color of the content to be equal to the tab</h3>
    </div>
  </div>
</div>