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
Vous devez vous connecter pour publier un commentaire.
Une autre solution est de faire de l'entrants et sortants éléments occupent le même espace, par exemple en les ayant à la fois en position absolue:
http://jsfiddle.net/phepyezx/7/
Vous pouvez utiliser
transition-delay
attendre jusqu'à ce que le laisser composant disparaît avant de faire l'entrer composant apparaissent, par exemple:Résolu à l'aide de la
componentWillUnmount()
cycle de vie de la méthode.http://jsfiddle.net/phepyezx/9/
Voici le code:
Et le css:
Vous pouvez obtenir le même résultat avec Jonny Buchanan réponse qui utilise un positionnement absolu et un retard au lieu de
componentWillUnmount()
Si vous voulez retarder le rendu de l'élément suivant, vous pouvez utiliser quelque chose comme ceci:
Et dans votre méthode de rendu: