fpiskur fpiskur - 3 months ago 20
CSS Question

How to change Bootstrap tabs fade OUT speed?

I am trying to change the speed of a fade effect in Bootstrap. I found this answer using 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>





...but this only affects the fade-in time. The fade-out stays the same. Any suggestions?

Answer

There is no fade-out time, the class that makes the element visible just gets removed.

To make it fade-out, you have to make sure the item doesn't get removed from the dom (HTML document), but rather make it invisible so it can fade.

Here is an example, adjust to your wishes:

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

Comments