css - 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);
  }

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

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

Answer 1

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

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