javascript - 如何更改 Bootstrap 选项卡淡出速度？

Question

我正在尝试更改 Bootstrap 中淡入淡出效果的速度。我使用 css 找到了这个答案:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.fade {
   opacity: 0;
   -webkit-transition: opacity 1.5s linear;
      -moz-transition: opacity 1.5s linear;
       -ms-transition: opacity 1.5s linear;
        -o-transition: opacity 1.5s linear;
           transition: opacity 1.5s linear;
 }

<div class="btn-group" role="group">
  <button class="btn active" data-toggle="tab" href="#one">One</button>
  <button class="btn" data-toggle="tab" href="#two">Two</button>
  <button class="btn" data-toggle="tab" href="#three">Three</button>
</div>
<div class="tab-content">
  <div id="one" class="tab-pane fade in active">This is the One</div>
  <div id="two" class="tab-pane fade">This is the Two</div>
  <div id="three" class="tab-pane fade">This is the Three</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

...但这只会影响淡入时间。淡出保持不变。有什么建议吗？

Answer 1

没有淡出时间，使元素可见的类只是被删除。

要使其淡出，您必须确保该元素不会从 dom(HTML 文档)中删除，而是使其不可见以便淡出。

这是一个例子，根据您的意愿进行调整:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.tab-content {
  position:relative;
}

.tab-content>.tab-pane {
  /* in order to make sure the elements are nicely in position
     use position:absolute; */
  position:absolute;
  top:0;
}

.fade {
   opacity: 0;
   -webkit-transition: opacity 1.5s linear;
      -moz-transition: opacity 1.5s linear;
       -ms-transition: opacity 1.5s linear;
        -o-transition: opacity 1.5s linear;
           transition: opacity 1.5s linear;
 }

.tab-content>.tab-pane:not(.in) { 
  /* display:none; is the default behaviour, make that display:block; */
  display:block; 
  /* make the opacity 0, that is what the transition responds to! */
  opacity:0;
}

<div class="btn-group" role="group">
  <button class="btn active" data-toggle="tab" href="#one">One</button>
  <button class="btn" data-toggle="tab" href="#two">Two</button>
  <button class="btn" data-toggle="tab" href="#three">Three</button>
</div>
<div class="tab-content">
  <div id="one" class="tab-pane fade in active">This is the One</div>
  <div id="two" class="tab-pane fade">This is the Two</div>
  <div id="three" class="tab-pane fade">This is the Three</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>