Réagissez la transition d'animation entre les composants

J'aimerais une animation entre deux éléments dont le premier volet s'estompe et est retiré de la DOM avant l'élément suivant est ajouté au DOM et disparaît dans. Sinon, le nouveau composant est ajouté au DOM et prend de la place, avant que l'ancien composant est supprimé. Vous pouvez voir le problème dans ce violon:

http://jsfiddle.net/phepyezx/4

//css snippet
.switch-enter {
    opacity: 0.01;
}
.switch-enter.switch-enter-active {
    opacity: 1.0;
}
.switch-leave {
    opacity: 1.0;
}
.switch-leave.switch-leave-active {
    opacity: 0;
}

//React snippet 
<ReactCSSTransitionGroup transitionName="switch">
    <div key={key} className={className}>{this.text()}</div>
</ReactCSSTransitionGroup>

Inacceptable pour la solution (pour moi) est de cacher le composant d'origine avec le css avant de faire la transition vers le nouveau composant comme on le voit ici:

http://jsfiddle.net/phepyezx/5

//Change to css
.switch-leave {
    visibility: hidden;
    height: 0px;
    width: 0px;
    opacity: 1.0;
}

Est-il un moyen de "retard" réagir l'installation d'un nouveau composant avant de l'original est supprimé? Je suis ouvert à la vitesse ou à une autre bibliothèque pour y parvenir.

Grâce

source d'informationauteur Rick Jolly