Obtenir ReactCSSTransitionGroup de travailler pour un effet de fondu de transition avec React.js
J'ai une simple page de destination que je veux ajouter un effet de transition. Je suis à l'aide de Réagir de mon point de vue, le rendu. Je veux avoir un bouton fade in et fade out basé sur certains états:
<ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
<div className="button-row">
<a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
</div>
</ReactCSSTransitionGroup>
CSS:
.example-enter {
opacity: 0.01;
transition: opacity .5s ease-in;
}
.example-enter.example-enter-active {
opacity: 1;
}
.example-leave {
opacity: 1;
transition: opacity .5s ease-in;
}
.example-leave.example-leave-active {
opacity: 0.01;
}
.example-appear {
opacity: 0.01;
transition: opacity .5s ease-in;
}
.example-appear.example-appear-active {
opacity: 1;
}
Cependant, lorsque je l'exécute, la transition ne fonctionne pas. Est-il quelque chose que je suis absent? Merci!!!!
OriginalL'auteur user1072337 | 2015-07-16
Vous devez vous connecter pour publier un commentaire.
Votre code fonctionne, voir JSFiddle. J'ai agrandi la durée de la transition de
.example-appear
et changé la transition de.example-enter
que vous pouvez voir après avoir cliqué sur tous les liens.Noter que
.example-appear
, qui est déclenché encomponentDidMount()
, a des effets sur le premier rendu de la montée de la composante ;.example-enter
a en revanche des effets sur le rendu de l'enfants composants.OriginalL'auteur okm