CSSTransition动画无效

时间:2017-09-29 13:11:28

标签: css css-transitions reactcsstransitiongroup

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

我认为转换有问题,因为如果我只是对不透明度的动画它一切正常

我正在使用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;
 }

1 个答案:

答案 0 :(得分:1)

这是猜测,基于代码并且没有尝试代码,因为您没有提供测试用例,但translate(A)translateX(A)相同,与{{1}不同}}。因此,您可能希望在translate(A, A)规则中尝试使用transform: translate(0, 0);

此外,应在初始元素上设置过渡属性,因此在.animate-enter.animate-enter-active而不是.animate-enter上。