Bootstrap: how to fade out and then hide something using the default classes "put out", "hide", "in"?

Question

Bootstrap obviously uses the classes 'hide', 'fade' and 'in' for its transitions.

The problem I am facing is that using "fade" and "in" will change the opacity from 0 to 1. The transition effect is perfect, but the content still takes up space on the page, even if you cannot see it. For example, if the container has a border, there will be a large space before the border.

I want to use my existing CSS transitions by adding and removing the 'in' class, but I also want any element that disappears to be hidden, but only after the transition is complete. So basically, exactly what they do in modal, but I don’t know how they do it.

In my example below, adding or removing a hide means that the div appears or disappears instantly before the fading effect can occur.

Js fiddle here

HTML example:

<div class="control-group"> <label class="control-label">Choose one:</label> <div class="controls"> <label class="radio inline"> <input type="radio" name="color-radio" id="yellow-trigger" value="yellow" />Yellow Box</label> <label class="radio inline"> <input type="radio" name="color-radio" id="red-trigger" value="red" />Red Box</label> </div> </div> <div id="yellow-box" class="hide fade"> <p>I'm yellow</p> </div> <div id="red-box" class="hide fade"> <p>I'm red</p> </div> 

JS example:

 $(document).ready(function () { $('#yellow-trigger').click(function () { $('#yellow-box').addClass('in').removeClass('hide'); $('#red-box').addClass('hide').removeClass('in'); }); $('#red-trigger').click(function () { $('#red-box').addClass('in').removeClass('hide'); $('#yellow-box').addClass('hide').removeClass('in'); }); }); 

Answer 1

Any reason to not just use jQuery for the fadeIn effect? Below is some code to make the effect of gradual change in jQuery.

The riddle is here

Removed class "fade"

 <div id="yellow-box" class="hide"> <p>I'm yellow</p> </div> 

Updated jQuery for fade in

 $(document).ready(function () { $('#yellow-trigger').click(function () { $('#red-box').hide(); $('#yellow-box').fadeIn('slow'); }); $('#red-trigger').click(function () { $('#yellow-box').hide(); $('#red-box').fadeIn('slow'); }); 

});

Answer 2

This is very old, but in case someone else gets here, the answer is to use a single-frame handler for the synthetic bsTransitionEnd event.

Example:

 $(".alert").one('bsTransitionEnd',function() { $(this).addClass('hide'); }); window.setTimeout(function(){ $(".alert").removeClass('in'); },1000);