問題タブ [reactcsstransitiongroup]

ReactCSSTransitionGroup を使用してアニメーションを実行していますが、意味をなさない興味深いものを見つけました。

以下の例では、 をクリックすると、正常に動作するの<div className="HeartControl">が更新されます。(ただし、効果を達成するために必ずしも ReactCSSTransitionGroup が必要であるとは限りません)。height<div className="HeartFill">

興味深いことに、クリックすると<div key={this.state.heartHeight} className="HeartFill" style={styleHeartFill}></div>、既存のコンポーネントの後に新しい React コンポーネント ID が追加された別のコンポーネントが表示されます。

しかし、そこには常に1つしかないと思い<div className="HeartFill">ます。

どうしてこうなった？？？

PS。数回クリックすると、結果は次のようになります。

`

Android 5.0 では、ReactCSSTransitionGroup が断続的に機能しているように見えます。最初のアプリの起動時に、ReactCSSTransitionGroup は dom から要素を正常に削除します。その後、アプリが強制終了されて再度開かれると、ReactCSSTransitionGroup は dom から要素を削除しません。

クラス名「example-enter example-enter-active」は dom に残り、要素を削除しません。

以下は、ReactCSSTransitionGroup のコードです。

以下はCSSです：

どんな助けでも大歓迎です。ありがとう

React.js アプリ ( http://facebook.github.io/react/docs/animation.html )内のリストに入力するためのアニメーションを追加しようとしています。

しかしReactCSSTransitionGroup、そのような例外をスローします:

Uncaught TypeError: Cannot read property '_mockedReactClassConstructor' of undefined

警告とともに：

Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components). warning.js:36

Warning: Only functions or strings can be mounted as React components.

私のコンポーネントは次のようになります。

他の場所から取得したデータを含む React コンポーネントをアニメーション化しようとしています。ReactCSSTransitionGroupそれをうまく機能するように配置します。つまり、コンポーネントのメソッドを変更して、データがフェッチされるまでrender()返すようにするまで ( data なしでレンダリングされないようにするため)。false

コンポーネントはすぐにマウントされ、その時点でアニメーション クラスが追加されますが、後でレンダリングされるだけです。この考え方は正しいでしょうか？render実際のコンポーネントを返すときにコンポーネントをアニメーション化するにはどうすればよいですか?

で要素の高さをアニメーション化しようとしているReactCSSTransitionGroupので、アニメーションを次のようにします。

http://jsfiddle.net/cherry/hgk4Lme9/

問題は、要素の高さを常に知っているとは限らscrollHeightないことclientHeightですcomponentDidMount.node.style.height

http://jsfiddle.net/cherry/dz8uod7u/

アニメーションを離れると見栄えがしますが、要素が入ると少し点滅し、スケーリングアニメーションが奇妙に見えます

レンダリングがすぐに行われる原因を尋ねるためであるはずなので、node.scrollHeightアニメーションが開始する前に同じ情報を取得して css ルールを挿入する方法はありますか? それとも逆に考えるべきでしょうか？

が に近くないか小さくないmax-heightと、結果のアニメーション速度が非常に奇妙になり、コンポーネントの高さが大きく異なるため、このソリューションにはあまり満足していません。max-heightheight

最終的な解決策は少し厄介になる可能性があると想像できますが、Mixin にすることで、どこでも再利用できるようになると思います。

反応トランジション グループを使用して簡単なトランジションを作成しようとしましたが、動作しません。トランジションが機能していません。私は一意のキーを使用しました。

この例では、単純な 2 つの画像のフェードイン フェードアウト コンポーネントを作成しました。

適切なCSSも含めました：

なぜこれが機能しないのですか？画像は切り替わりますが、フェードしません..

ありがとう！

React と Reflux を使用してアプリを構築しており、アイテムのリストを特定の順序でレンダリングしようとしています。

アイテムは、新しい順にレンダリングされるカスタム Post コンポーネントであるため、最新の投稿がリストの一番上に表示されます。

Khan Academy のTimeoutTransitionGroupを使用して、リスト項目をフェードインおよびフェードアウトさせています。

私が見ている問題は、新しい投稿を追加し、コンポーネントが新しい小道具を介して更新されたリストを取得すると、リストの最初の要素ではなく最後の要素で遷移が発生することです。追加された新しいアイテムの位置なので、最初の要素がフェードインするようにしたいと思います。

投稿 2 <- この投稿は新しく追加されました

投稿 1 <- この投稿はフェードインします

アイテムの同じ順序を指定する方法はありますが、それらを逆の順序でレンダリングするか、同様の方法はありますか?

これは私のコンポーネントのレンダリング関数です:

これは CSS トランジションです。

どんな助けでも大歓迎です！