ES6を使用しているときに反応コンポーネントにCSSを適用するにはどうすればよいですか？

Question

シンプルなfadeInアニメーションを適用したいのですが、これはCSSクラスを使用するReactCSSTransitionGroupを使用することによるものです。誰でも、どのようにes6でそれを実装することができます。

es6構文を使用しているときに、反応コンポーネントにcssクラスを適用する方法がわかりません。おかげ

Answer 1

私はCSSクラスが私にどのように適用されるかわからないが、ES6構文

を使用している部品が反応し、私はあなたが遷移中にクラス名を変更する方法を意味想定し、それにclassName属性を追加する場合はありませんコンポーネント要素？ ES6を使用するかどうかは、完全に無関係です。 JSXで：

<div className="my-div"></div> 

JSでは：

React.createElement('div', { className: 'my-div' }) 

は、単純なフェードインアニメーションを適用したい、それがこれまで唯一の方法のように思えるのCSSクラスを使用するReactCSSTransitionGroupを使用することです。誰でも、どのようにes6でそれを実装することができます。

ES6は、CSSおよびCSSトランジショングループアドオンとは関係ありません。

単にフェードインで、要素がDOMに導入されているだけの場合、CSS移行グループは必要ありません。可能であれば、クラスのCSSトランジションを使用するだけです。

しかし、Reactの問題は、Reactでは、状態間のアニメーションがそうでないように動作しない（DOMが破壊されてしまい、まったく動作しない再建された）。文字通り、すべてのトランジショングループ（汎用ラッパーコンポーネント）は、指定した時刻（.mycomponent-enter、.mycomponent-enter-active、.mycomponent-leave、.mycomponent-leave-active）でオン/オフを切り替える4つのクラスを追加します。これにより、CSSを使用してアニメーションを適用できます。あなたはAPIに従ってプロパティを適用します - そこにはが必要ですはkeyになります。それ以外の場合、リアクションはあなたに叫ぶでしょうし、うまくいかず、入力と退室を設定する必要があります（そうでなければ、期間なし）。

あなたが試したことを全く何も指定していないので、それ以上のことはできません。私はちょうどあなたがこれを記述した方法は、文字通りES6、または実際にはJavascriptとは関係がないことを強調したいと思います。純粋にJSを使用して異なるアニメーションを適用したい場合