回答編集履歴
4
修正
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
1
|
|
5
|
+
1: アコーディオンボディにあらかじめ高さを与えておく。
|
|
6
6
|
|
|
7
7
|
```html
|
|
8
8
|
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
2
|
|
15
|
+
2: createdのタイミングであらかじめ高さを与える
|
|
16
16
|
|
|
17
17
|
```js
|
|
18
18
|
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
|
|
39
|
-
問題の特定ですが、次のように`onBeforeEnter`などのメソッドにコンソールを仕
|
|
39
|
+
問題の特定ですが、次のように`onBeforeEnter`などのメソッドにコンソールを仕込み、デバッガを使って値や挙動を確認し、どのタイミングでどんな振る舞いか確認して絞り込めます。
|
|
40
40
|
|
|
41
41
|
```js
|
|
42
42
|
|
3
追記
test
CHANGED
|
@@ -34,6 +34,8 @@
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
+
|
|
38
|
+
|
|
37
39
|
問題の特定ですが、次のように`onBeforeEnter`などのメソッドにコンソールを仕組み、デバッガを使って値や挙動を確認し、どのタイミングでどんな振る舞いか確認して絞り込めます。
|
|
38
40
|
|
|
39
41
|
```js
|
|
@@ -55,3 +57,7 @@
|
|
|
55
57
|
...
|
|
56
58
|
|
|
57
59
|
```
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
特定した結果、`onBeforeLeave`のはじめ段階で、`el.style`の`height`プロパティが空文字列になっていたのが原因かと思い、応急処置を考えました。`onBeforeLeave`の中で高さを設定することでは、なぜうまくいかないかということまでについては調べられていません。
|
2
xx
test
CHANGED
|
@@ -6,11 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
```html
|
|
8
8
|
|
|
9
|
-
<transition v-on:before-enter="onBeforeEnter" v-on:enter="onEnter" v-on:before-leave="onBeforeLeave"
|
|
10
|
-
|
|
11
|
-
v-on:leave="onLeave">
|
|
12
|
-
|
|
13
|
-
|
|
9
|
+
<div class="body" v-show="show" style="height: 472px;">
|
|
14
10
|
|
|
15
11
|
```
|
|
16
12
|
|
|
@@ -20,15 +16,19 @@
|
|
|
20
16
|
|
|
21
17
|
```js
|
|
22
18
|
|
|
23
|
-
|
|
19
|
+
...
|
|
24
20
|
|
|
25
|
-
|
|
21
|
+
created: function () {
|
|
26
22
|
|
|
27
|
-
|
|
23
|
+
const el = document.querySelector('#app .accordion .body');
|
|
28
24
|
|
|
29
|
-
|
|
25
|
+
el.style.height = el.scrollHeight + 'px';
|
|
30
26
|
|
|
27
|
+
},
|
|
28
|
+
|
|
31
|
-
|
|
29
|
+
methods: {
|
|
30
|
+
|
|
31
|
+
...
|
|
32
32
|
|
|
33
33
|
```
|
|
34
34
|
|
|
@@ -38,16 +38,20 @@
|
|
|
38
38
|
|
|
39
39
|
```js
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
...
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
onBeforeEnter: function (el) {
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
console.log('onBeforeEnter------------------------------')
|
|
46
46
|
|
|
47
|
-
|
|
47
|
+
console.log(el.style.height)
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
el.style.height = 0;
|
|
50
50
|
|
|
51
|
+
console.log(el.style.height)
|
|
52
|
+
|
|
51
|
-
|
|
53
|
+
},
|
|
54
|
+
|
|
55
|
+
...
|
|
52
56
|
|
|
53
57
|
```
|
1
〷
test
CHANGED
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
|
|
39
39
|
```js
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
onBeforeEnter: function (el) {
|
|
42
42
|
|
|
43
43
|
console.log('onBeforeEnter------------------------------')
|
|
44
44
|
|
|
@@ -48,4 +48,6 @@
|
|
|
48
48
|
|
|
49
49
|
console.log(el.style.height)
|
|
50
50
|
|
|
51
|
+
},
|
|
52
|
+
|
|
51
53
|
```
|