React JSトランジションクラスを変更しました

Question

ReactJSでウェブサイトを構築しています。私のページには、コンテンツセクションとサイドバーがあります。

ボタンをクリックするとサイドバーを切り替える必要があります。この時点で、コンテンツのクラスをブートストラップからcol-md-9からcol-md-12に変更し、属性hiddenをサイドバーに設定します。

しかし、サイドバーをフェードインやフェードアウトするなど、いくつかのトランジションを追加して、コンテンツのサイズを増やしたいと考えています。私はクラスを変更しているので、どのようにこれらのトランジションを追加できるのか分かりません。

私が何をしなければならないか教えてもらえますか？

Answer 1

CSSを使用できます。あなたがクラスを変更することで、CSSトランジションを使用することができますanimate.css

https://daneden.github.io/animate.css/

Answer 2

を見てみましょう。それはnone値にdisplay属性が設定されますので、それは、hiddenブートストラップクラス名と一緒に動作しないことが

.fade-in { 
    opacity: 0; 
    transition: opacity 400ms; 
} 


.fade-out { 
    opacity: 1; 
    transition: opacity 400ms; 
} 

：ここでフェードアニメーションを行います2 clssesの例があります。それを動作させるには、hiddenとfade-outの代わりにfade-inクラス名を使用してください。サイドナビゲーションが表示されるようになると、