質問編集履歴
3
全体的に編集
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
|
+
### 前提
|
|
1
2
|
要素が直線的に移動するアニメーションをReactで作ろうとしています。
|
|
2
|
-
|
|
3
|
+
画面全体に広がっているdiv.lineanimをクリックすると、その上を、Blockと書かれた100x100pxの箱が左から右に流れるようにしたいです。
|
|
3
4
|
アニメーションライブラリは[ReactTransitionGroup](http://reactcommunity.org/react-transition-group/transition)です。`Transition`と`CSSTransition`がありますが、InlineCSSを使いたいので`Transition`の方を使っています。
|
|
4
5
|
|
|
6
|
+
### 発生している問題
|
|
5
|
-
しかし、現状ではクリックしても要素が
|
|
7
|
+
しかし、現状ではクリックしても要素がアニメーションされません。`onEntered`のタイミングでちゃんと画面右側に移動しているのですが、なぜかアニメーションせずにいきなり表示位置が変わります。onEntering→onEnteredの遷移や`this.state.show`の更新はうまくいっているようなのですが...
|
|
6
|
-
|
|
8
|
+
onEntering→onEnteredの遷移の間隔はちゃんと`this.duration`で指定した待ち時間があるのですが、その間アニメーションせずにずっと初期位置に留まったままで、`onEntered`に到達した瞬間に表示位置が変わるという感じです。
|
|
7
9
|
|
|
8
10
|
解決につながる方法をご存知でしたら教えていただきたいです。
|
|
9
11
|
よろしくお願いします。
|
|
10
12
|
|
|
11
|
-
|
|
13
|
+
### 該当コード
|
|
12
14
|
```javascript
|
|
13
15
|
import React, { Component } from 'react'
|
|
14
16
|
import '../css/lineanim.css'
|
|
@@ -28,7 +30,7 @@
|
|
|
28
30
|
defaultStyle = {
|
|
29
31
|
transition: `transform ${this.duration}ms linear`,
|
|
30
32
|
opacity: 1,
|
|
31
|
-
backgroundColor: '
|
|
33
|
+
backgroundColor: 'red',
|
|
32
34
|
width: '100px',
|
|
33
35
|
height: '100px',
|
|
34
36
|
transform: `translateX(0px)`,
|
|
@@ -56,7 +58,6 @@
|
|
|
56
58
|
};
|
|
57
59
|
onEntered = () => {
|
|
58
60
|
console.log("onEntered")
|
|
59
|
-
this.setShow(false)
|
|
60
61
|
}
|
|
61
62
|
|
|
62
63
|
render() {
|
|
@@ -94,11 +95,8 @@
|
|
|
94
95
|
lineanim.css
|
|
95
96
|
```css
|
|
96
97
|
.lineanim {
|
|
97
|
-
background-color :
|
|
98
|
+
background-color :"gray";
|
|
98
99
|
height:100vh;
|
|
99
100
|
width:100%;
|
|
100
101
|
}
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
### 追記
|
|
104
|
-
`onEntered`のときに`this.state.show`を`false`に戻さないようにしてみると、`onEntered`のタイミングでちゃんと画面右側に移動しているのですが、なぜかアニメーションせずにいきなり表示位置が変わります。onEntering→onEnteredの遷移の間隔はちゃんと`this.duration`で指定した待ち時間があるのですが、その間アニメーションせずにずっと初期位置に留まったままで、`onEntered`に到達した瞬間に表示位置が変わるという感じです。
|
|
102
|
+
```
|
2
誤認表記修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -101,4 +101,4 @@
|
|
|
101
101
|
```
|
|
102
102
|
|
|
103
103
|
### 追記
|
|
104
|
-
`onEntered`のときに`this.state.show`を`false`に戻さないようにしてみると、`onEntered`のタイミングでちゃんと画面右側に移動しているのですが、なぜかアニメーションせずにいきなり表示位置が変わります。onEntering→onEnteredの遷移の間隔はちゃんとduration
|
|
104
|
+
`onEntered`のときに`this.state.show`を`false`に戻さないようにしてみると、`onEntered`のタイミングでちゃんと画面右側に移動しているのですが、なぜかアニメーションせずにいきなり表示位置が変わります。onEntering→onEnteredの遷移の間隔はちゃんと`this.duration`で指定した待ち時間があるのですが、その間アニメーションせずにずっと初期位置に留まったままで、`onEntered`に到達した瞬間に表示位置が変わるという感じです。
|
1
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
アニメーションライブラリは[ReactTransitionGroup](http://reactcommunity.org/react-transition-group/transition)です。`Transition`と`CSSTransition`がありますが、InlineCSSを使いたいので`Transition`の方を使っています。
|
|
4
4
|
|
|
5
5
|
しかし、現状ではクリックしても要素が動きません。onEntering→onEnteredの遷移や`this.state.show`の更新はうまくいっているようなのですが...
|
|
6
|
+
**※下に追記あり**
|
|
6
7
|
|
|
7
8
|
解決につながる方法をご存知でしたら教えていただきたいです。
|
|
8
9
|
よろしくお願いします。
|
|
@@ -97,4 +98,7 @@
|
|
|
97
98
|
height:100vh;
|
|
98
99
|
width:100%;
|
|
99
100
|
}
|
|
100
|
-
```
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### 追記
|
|
104
|
+
`onEntered`のときに`this.state.show`を`false`に戻さないようにしてみると、`onEntered`のタイミングでちゃんと画面右側に移動しているのですが、なぜかアニメーションせずにいきなり表示位置が変わります。onEntering→onEnteredの遷移の間隔はちゃんとduration分待ち時間があるのですが、その間アニメーションせずにずっと初期位置に留まったままで、`onEntered`に到達した瞬間に表示位置が変わるという感じです。
|