質問編集履歴
3
全体的に編集
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,14 +1,18 @@
|
|
|
1
|
+
### 前提
|
|
2
|
+
|
|
1
3
|
要素が直線的に移動するアニメーションをReactで作ろうとしています。
|
|
2
4
|
|
|
3
|
-
div.lineanim
|
|
5
|
+
画面全体に広がっているdiv.lineanimをクリックすると、その上を、Blockと書かれた100x100pxの箱が左から右に流れるようにしたいです。
|
|
4
6
|
|
|
5
7
|
アニメーションライブラリは[ReactTransitionGroup](http://reactcommunity.org/react-transition-group/transition)です。`Transition`と`CSSTransition`がありますが、InlineCSSを使いたいので`Transition`の方を使っています。
|
|
6
8
|
|
|
7
9
|
|
|
8
10
|
|
|
11
|
+
### 発生している問題
|
|
12
|
+
|
|
9
|
-
しかし、現状ではクリックしても要素が
|
|
13
|
+
しかし、現状ではクリックしても要素がアニメーションされません。`onEntered`のタイミングでちゃんと画面右側に移動しているのですが、なぜかアニメーションせずにいきなり表示位置が変わります。onEntering→onEnteredの遷移や`this.state.show`の更新はうまくいっているようなのですが...
|
|
10
|
-
|
|
14
|
+
|
|
11
|
-
|
|
15
|
+
onEntering→onEnteredの遷移の間隔はちゃんと`this.duration`で指定した待ち時間があるのですが、その間アニメーションせずにずっと初期位置に留まったままで、`onEntered`に到達した瞬間に表示位置が変わるという感じです。
|
|
12
16
|
|
|
13
17
|
|
|
14
18
|
|
|
@@ -18,7 +22,7 @@
|
|
|
18
22
|
|
|
19
23
|
|
|
20
24
|
|
|
21
|
-
|
|
25
|
+
### 該当コード
|
|
22
26
|
|
|
23
27
|
```javascript
|
|
24
28
|
|
|
@@ -58,7 +62,7 @@
|
|
|
58
62
|
|
|
59
63
|
opacity: 1,
|
|
60
64
|
|
|
61
|
-
backgroundColor: '
|
|
65
|
+
backgroundColor: 'red',
|
|
62
66
|
|
|
63
67
|
width: '100px',
|
|
64
68
|
|
|
@@ -114,8 +118,6 @@
|
|
|
114
118
|
|
|
115
119
|
console.log("onEntered")
|
|
116
120
|
|
|
117
|
-
this.setShow(false)
|
|
118
|
-
|
|
119
121
|
}
|
|
120
122
|
|
|
121
123
|
|
|
@@ -190,7 +192,7 @@
|
|
|
190
192
|
|
|
191
193
|
.lineanim {
|
|
192
194
|
|
|
193
|
-
background-color :
|
|
195
|
+
background-color :"gray";
|
|
194
196
|
|
|
195
197
|
height:100vh;
|
|
196
198
|
|
|
@@ -199,9 +201,3 @@
|
|
|
199
201
|
}
|
|
200
202
|
|
|
201
203
|
```
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
### 追記
|
|
206
|
-
|
|
207
|
-
`onEntered`のときに`this.state.show`を`false`に戻さないようにしてみると、`onEntered`のタイミングでちゃんと画面右側に移動しているのですが、なぜかアニメーションせずにいきなり表示位置が変わります。onEntering→onEnteredの遷移の間隔はちゃんと`this.duration`で指定した待ち時間があるのですが、その間アニメーションせずにずっと初期位置に留まったままで、`onEntered`に到達した瞬間に表示位置が変わるという感じです。
|
2
誤認表記修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -204,4 +204,4 @@
|
|
|
204
204
|
|
|
205
205
|
### 追記
|
|
206
206
|
|
|
207
|
-
`onEntered`のときに`this.state.show`を`false`に戻さないようにしてみると、`onEntered`のタイミングでちゃんと画面右側に移動しているのですが、なぜかアニメーションせずにいきなり表示位置が変わります。onEntering→onEnteredの遷移の間隔はちゃんとduration
|
|
207
|
+
`onEntered`のときに`this.state.show`を`false`に戻さないようにしてみると、`onEntered`のタイミングでちゃんと画面右側に移動しているのですが、なぜかアニメーションせずにいきなり表示位置が変わります。onEntering→onEnteredの遷移の間隔はちゃんと`this.duration`で指定した待ち時間があるのですが、その間アニメーションせずにずっと初期位置に留まったままで、`onEntered`に到達した瞬間に表示位置が変わるという感じです。
|
1
追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -8,6 +8,8 @@
|
|
|
8
8
|
|
|
9
9
|
しかし、現状ではクリックしても要素が動きません。onEntering→onEnteredの遷移や`this.state.show`の更新はうまくいっているようなのですが...
|
|
10
10
|
|
|
11
|
+
**※下に追記あり**
|
|
12
|
+
|
|
11
13
|
|
|
12
14
|
|
|
13
15
|
解決につながる方法をご存知でしたら教えていただきたいです。
|
|
@@ -197,3 +199,9 @@
|
|
|
197
199
|
}
|
|
198
200
|
|
|
199
201
|
```
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
### 追記
|
|
206
|
+
|
|
207
|
+
`onEntered`のときに`this.state.show`を`false`に戻さないようにしてみると、`onEntered`のタイミングでちゃんと画面右側に移動しているのですが、なぜかアニメーションせずにいきなり表示位置が変わります。onEntering→onEnteredの遷移の間隔はちゃんとduration分待ち時間があるのですが、その間アニメーションせずにずっと初期位置に留まったままで、`onEntered`に到達した瞬間に表示位置が変わるという感じです。
|