質問編集履歴

タイトル

2020/06/23 11:35

投稿

スコア48

test CHANGED Viewed

	@@ -1 +1 @@
1	- React Transition Groupでレンダーするコンポーネント内で、別々のアニメーションを設定したい。
1	+ React Transition Groupでレンダーするコンポーネント内で、個別にアニメーションを設定したい。

test CHANGED Viewed

@@ -170,38 +170,38 @@
 結果は、アニメーションが発生しなくなりました。
+```jsx
+const SideBar = ({ setSideBar }) => {
+  return (
+    <div className={`"sideBackground" ${style.side__wrap}`} onClick={() => setSideBar(false)}>
+      <div className={`"sideContents" ${style.side__contents}`} onClick={e => e.stopPropagation()}>
+        <h2>Side bar</h2>
+        <button onClick={() => setSideBar(false)} className={style.app__button}>
+          Close side bar
+        </button>
+      </div>
+    </div>
+  );
+};
+```
 ```scss
-const SideBar = ({ setSideBar }) => {
-  return (
-    <div className={`"sideBackground" ${style.side__wrap}`} onClick={() => setSideBar(false)}>
-      <div className={`"sideContents" ${style.side__contents}`} onClick={e => e.stopPropagation()}>
-        <h2>Side bar</h2>
-        <button onClick={() => setSideBar(false)} className={style.app__button}>
-          Close side bar
-        </button>
-      </div>
-    </div>
-  );
-};
-```
-```scss
 .side-enter-active {
   .sideBackground {

本文

2020/06/23 11:35

投稿

スコア48

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -166,10 +166,10 @@
 サイドバーのコンポーネントにトランジション用のクラスを付与し、トランジションのスタイルに付与したクラス別にスタイルを書いてみました。
-変化はありませんでした。
 コードは下記の通りです。
+結果は、アニメーションが発生しなくなりました。
 ```scss
 const SideBar = ({ setSideBar }) => {