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

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

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

Answer 1

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

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