CSSTransition Animation funktioniert nicht

Question

Ich habe eine Animation für eine Reaktionskomponente, die ich nicht ausführen kann.

Ich denke, es ist etwas falsch mit den Übergängen, denn wenn ich nur auf eine Animation der Opazität alles funktioniert gut

Ich verwende die CSSTransitionGroup von 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> 

Meine Animation sieht aus wie diese

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

} 

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

und das Styling der Selbst Komponente ist

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

Answer 1

Dies ist eine Vermutung, basierend auf dem Code und ohne Code zu versuchen, weil Sie keinen Testfall vorsah, aber translate(A) ist die gleiche wie translateX(A), und nicht die gleiche wie translate(A, A). Vielleicht möchten Sie stattdessen transform: translate(0, 0); in Ihrer .animate-enter.animate-enter-active Regel versuchen.

Außerdem sollte die Übergangseigenschaft auf das ursprüngliche Element gesetzt werden, also auf .animate-enter und nicht auf .animate-enter.animate-enter-active.