L'animation CSSTransition ne fonctionne pas

Question

J'ai une animation pour un composant de réaction, que je ne peux pas exécuter.

Je pense qu'il ya quelque chose de mal avec les transitions, parce que si je viens d'une animation de l'opacité tout fonctionne très bien

J'utilise le CSSTransitionGroup de react-transition-group

<CSSTransitionGroup 
    transitionName="animate" 
    transitionEnter={true} 
    transitionEnterTimeout={700} 
    transitionLeave={true} 
    transitionLeaveTimeout={700} > 
     {this.state.someState ? <Child key='animatedFormKey' handleChild={this.handleChild}/> : null} 
</CSSTransitionGroup> 

Mon animation ressemble ce

.animate-enter { 
    transform: translate(0, 100%); 

} 

.animate-enter.animate-enter-active { 
    transform: translate(0%); 
    transition: transform 700ms ease-in-out; 
} 

et le style de l'élément lui-même est

.childComponent { 
    position: fixed; 
    height: 77%; 
    width: 100%; 
    bottom: 0; 
    z-index: 12; 
    background-color: #fff; 
} 

Answer 1

C'est une estimation, basée sur le code et sans essayer de code parce que vous n'avez pas fourni un test, mais translate(A) est le même que translateX(A), et pas le même que translate(A, A). Donc, vous voudrez peut-être essayer transform: translate(0, 0); à la place dans votre règle .animate-enter.animate-enter-active.

De même, la propriété de transition doit être définie sur l'élément initial, donc sur .animate-enter et non sur .animate-enter.animate-enter-active.