ReactCSSTransitionGroup 没有为转换翻译正确设置动画

Question

我可以在路线之间添加动画。但是当我尝试如下简单的操作时：

var IntroSection = React.createClass({
render: function(){
    return(

      <div id = "intro">

      <ReactCSSTransitionGroup transitionName="introFirst" transitionAppear={true} transitionAppearTimeout={1300}>
        <span key={"hello"}>  Hello, </span>
      </ReactCSSTransitionGroup>

     [...]
    </div>

css:

  .introFirst-appear{
    opacity: 0;
    transform: translateX(-250px);
    transition: opacity 10s linear;
  }

  .introFirst-appear.introFirst-appear-active {
    opacity: 1;
    transform:translateX(0px);
  }

Opacity 部分完美运行，但 translateX 部分根本不起作用。什么都没动。

css为div#intro，没有什么特别的，只有font，text-align，width，float:right

Answer 1

您只是指定不透明度应使用过渡规则进行动画处理。此外，根据 this anwer，转换属性仅适用于块级元素。尝试这样做：

.introFirst-appear {
     /*...*/
     display: inline-block;
     transition: opacity 10s linear, transform 10s linear;
}

ReactCSSTransitionGroup 没有为转换翻译正确设置动画

ReactCSSTransitionGroup not animating properly for transform translate

css

reactjs

reactcsstransitiongroup