CSSTransitionアニメーションが機能しない

Question

私は反応コンポーネントのアニメーションを持っていますが、これは実行できません。

私だけの不透明度のアニメーションにそれがすべての罰金

を動作するかどうか、私はCSSTransitionGroupを使用していますので、私は私のアニメーションがどのように見える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> 

から、遷移と間違って何かがあると思いますこの

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

} 

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

とコンポーネント、それを自己のスタイリングが

です

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

Answer 1

これはテストケースを提供していませんでしたが、translate(A)はtranslateX(A)と同じであり、かつtranslate(A, A)と同じではないので、コードに、コードを実行しようとせず基づき、推測です。したがって、.animate-enter.animate-enter-activeルールの代わりにtransform: translate(0, 0);を試してみるとよいでしょう。

また、移行プロパティは最初の要素に設定する必要があります。.animate-enterでは.animate-enter.animate-enter-activeではなく、このプロパティを設定してください。