0

ルート間にアニメーションを追加しても問題ありません。しかし、次のように簡単なことを試すと：

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ものは何もありません。fonttext-alignwidthfloat:right

4

1 に答える 1

1

遷移ルール​​で不透明度をアニメーション化する必要があることを指定しているだけです。また、この回答によると、変換プロパティはブロック レベルの要素にのみ適用されます。これを試してください：

.introFirst-appear {
     /*...*/
     display: inline-block;
     transition: opacity 10s linear, transform 10s linear;
}
于 2016-04-24T01:07:47.043 に答える