CSSTransition 动画不工作

Question

我有一个 React 组件的动画，我无法使用它运行。

我认为过渡有问题，因为如果我只是制作不透明度的动画，一切都很好

我正在使用来自 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)相同，与[不同] =12=]。因此，您可能想在 .animate-enter.animate-enter-active 规则中尝试使用 transform: translate(0, 0);。

此外，过渡属性应该设置在初始元素上，所以在 .animate-enter 而不是 .animate-enter.animate-enter-active.

CSSTransition 动画不工作

CSSTransition animation not working

css

css-transitions

reactcsstransitiongroup