我有一个反应组件的动画,我无法运行。
我认为转换有问题,因为如果我只是对不透明度的动画它一切正常
我正在使用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;
}
答案 0 :(得分:1)
这是猜测,基于代码并且没有尝试代码,因为您没有提供测试用例,但translate(A)
与translateX(A)
相同,与{{1}不同}}。因此,您可能希望在translate(A, A)
规则中尝试使用transform: translate(0, 0);
。
此外,应在初始元素上设置过渡属性,因此在.animate-enter.animate-enter-active
而不是.animate-enter
上。