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), Так что вы можете попробовать transform: translate(0, 0); вместо этого в вашем .animate-enter.animate-enter-active править.

Кроме того, свойство перехода должно быть установлено на начальном элементе, так что .animate-enter и не на .animate-enter.animate-enter-active,