0

render()コンポーネントの関数内に次のコードがあります。

..
<ReactCSSTransitionGroup
  transitionName="testing"
  transitionEnterTimeout={600}
  transitionLeaveTimeout={600}>

  <div>testing animations!</div>

</ReactCSSTransitionGroup>
..

そして、CSSファイルに次のコードがあります：

.testing-enter {
    animation: slideIn 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.testing-leave {
    animation: slideOut 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes slideIn {
    0% {
        opacity 0
        transform translate3d(-50px, 0, 0)
    }
    100% {
        opacity 1
        transform translate3d(0, 0, 0)
    }
}
@keyframes slideOut {
    0% {
        opacity: 1
        transform: translate3d(0, 0, 0)
    }
    100% {
        opacity: 0
        transform: translate3d(50px, 0, 0)
    }
}

divブロックを右からスライドインさせたいだけですが、何も起こりません! 間違ったコードが見つかりませんでした。すべて問題ないようです。

4

1 に答える 1

2

タグ内に静的コンテンツがあります<ReactCSSTransitionGroup/>。動的コンテンツが必要です。<div>testing animations!</div>マウスのクリック時にレンダリングする必要があるとしましょう。子を変数に割り当て、マウスのクリック時に変数を変更する必要があります。

let myDiv = buttonClicked ? <div>testing animations!</div> : <div></div>

<ReactCSSTransitionGroup
  transitionName="testing"
  transitionEnterTimeout={600}
  transitionLeaveTimeout={600}>

  {myDiv}

</ReactCSSTransitionGroup>

アクションが実行されず、最初のマウントで単にアニメーション化する必要がある場合は、代わりに transition-appear を使用してください。

ReactCSSTransitionGroup はオプションの props transitionAppear を提供し、コンポーネントの初期マウント時にトランジション フェーズを追加します。transitionAppear のデフォルト値が false であるため、通常、初期マウント時に移行フェーズはありません。以下は、prop transitionAppear に値 true を渡す例です。

<ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}>
   <div>testing animations!</div>
</ReactCSSTransitionGroup>


.example-appear {
  opacity: 0.01;
}

.example-appear.example-appear-active {
  opacity: 1;
  transition: opacity .5s ease-in;
}
于 2016-08-16T02:31:29.950 に答える