質問編集履歴
2
タイトル
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
React Transition Groupでレンダーするコンポーネント内で、別
|
|
1
|
+
React Transition Groupでレンダーするコンポーネント内で、個別にアニメーションを設定したい。
|
test
CHANGED
|
@@ -170,38 +170,38 @@
|
|
|
170
170
|
|
|
171
171
|
結果は、アニメーションが発生しなくなりました。
|
|
172
172
|
|
|
173
|
+
```jsx
|
|
174
|
+
|
|
175
|
+
const SideBar = ({ setSideBar }) => {
|
|
176
|
+
|
|
177
|
+
return (
|
|
178
|
+
|
|
179
|
+
<div className={`"sideBackground" ${style.side__wrap}`} onClick={() => setSideBar(false)}>
|
|
180
|
+
|
|
181
|
+
<div className={`"sideContents" ${style.side__contents}`} onClick={e => e.stopPropagation()}>
|
|
182
|
+
|
|
183
|
+
<h2>Side bar</h2>
|
|
184
|
+
|
|
185
|
+
<button onClick={() => setSideBar(false)} className={style.app__button}>
|
|
186
|
+
|
|
187
|
+
Close side bar
|
|
188
|
+
|
|
189
|
+
</button>
|
|
190
|
+
|
|
191
|
+
</div>
|
|
192
|
+
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
);
|
|
196
|
+
|
|
197
|
+
};
|
|
198
|
+
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
173
203
|
```scss
|
|
174
204
|
|
|
175
|
-
const SideBar = ({ setSideBar }) => {
|
|
176
|
-
|
|
177
|
-
return (
|
|
178
|
-
|
|
179
|
-
<div className={`"sideBackground" ${style.side__wrap}`} onClick={() => setSideBar(false)}>
|
|
180
|
-
|
|
181
|
-
<div className={`"sideContents" ${style.side__contents}`} onClick={e => e.stopPropagation()}>
|
|
182
|
-
|
|
183
|
-
<h2>Side bar</h2>
|
|
184
|
-
|
|
185
|
-
<button onClick={() => setSideBar(false)} className={style.app__button}>
|
|
186
|
-
|
|
187
|
-
Close side bar
|
|
188
|
-
|
|
189
|
-
</button>
|
|
190
|
-
|
|
191
|
-
</div>
|
|
192
|
-
|
|
193
|
-
</div>
|
|
194
|
-
|
|
195
|
-
);
|
|
196
|
-
|
|
197
|
-
};
|
|
198
|
-
|
|
199
|
-
```
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
```scss
|
|
204
|
-
|
|
205
205
|
.side-enter-active {
|
|
206
206
|
|
|
207
207
|
.sideBackground {
|
1
本文
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -166,10 +166,10 @@
|
|
|
166
166
|
|
|
167
167
|
サイドバーのコンポーネントにトランジション用のクラスを付与し、トランジションのスタイルに付与したクラス別にスタイルを書いてみました。
|
|
168
168
|
|
|
169
|
-
変化はありませんでした。
|
|
170
|
-
|
|
171
169
|
コードは下記の通りです。
|
|
172
170
|
|
|
171
|
+
結果は、アニメーションが発生しなくなりました。
|
|
172
|
+
|
|
173
173
|
```scss
|
|
174
174
|
|
|
175
175
|
const SideBar = ({ setSideBar }) => {
|