Bootstrap: Comment s'estompent puis cacher quelque chose à l'aide de la valeur par défaut 'fade', 'hide', 'dans' des classes?

Bootstrap rend évidemment l'utilisation de la "cacher", "fade" et "dans" les classes pour ses transitions.

Le problème, je vais avoir, c'est que l'utilisation de "fade" et "dans" la volonté de changer l'opacité de 0 à 1. L'effet de transition est parfaite, mais le contenu est toujours là, prenant de la place sur la page, même si vous ne pouvez pas le voir. Par exemple, si c'est le conteneur a une frontière, il y a un gros espace blanc avant la frontière.

Je veux faire usage de leur capter les transitions CSS en ajoutant et en supprimant le "dans" la classe, mais je veux aussi que quel que soit l'élément qui est à la décoloration, pour être caché, mais seulement après que la transition est terminée. Donc en gros, exactement ce qu'ils font dans la modale, mais je ne sais pas comment ils font.

Dans mon exemple ci-dessous, l'ajout ou la suppression de la cacher signifie que la div s'affiche ou disparaît instantanément, avant que l'effet de fondu peut arriver.

JS fiddle ici

Exemple HTML:

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

Exemple JS:

$(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');
    });
});