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 部分根本不起作用。什么都没动。

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

Answer 1

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

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