CSStransition动画不起作用

Question

我有一个反应组件的动画，我无法运行。

我认为过渡有问题，因为如果我只对不透明度的动画，它都可以正常工作

我正在使用react-transition-group

的CSSTransitionGroup

<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上。