Vue、初期開いているアコーディオンパネルが、初回はアニメーションしない問題

Vueで開閉時にアニメーションするアコーディオンパネルを試しています。
「v-show」の初期値をtrueにして、初期が開いてる状態にした場合、
最初だけ閉じる時のアニメがされずに一瞬で表示ブロックが消えます。

最初だけアニメーションがされない問題点がわからないので、助言を頂けると助かります。

html
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8">
6    <title></title>
7</head>
8
9<body>
10
11    <style>
12        .accordion {
13            max-width: 400px;
14            margin-bottom: 20px;
15            background-color: #000;
16            border-radius: 6px;
17        }
18
19        .accordion .header {
20            height: 40px;
21            line-height: 40px;
22            padding: 0 40px 0 8px;
23            position: relative;
24            color: #fff;
25            cursor: pointer;
26        }
27
28        .accordion .body {
29            overflow: hidden;
30            background-color: #fff;
31            border: 10px solid;
32            border-top: 0;
33            border-bottom-left-radius: 6px;
34            border-bottom-right-radius: 6px;
35            transition: 150ms ease-out;
36        }
37
38        .accordion .body-inner {
39            padding: 8px;
40            overflow-wrap: break-word;
41        }
42    </style>
43
44    <div id="app">
45        <div class="accordion" v-bind:class="theme">
46            <div class="header" v-on:click="toggle">
47                <slot name="header">アコーディオン</slot>
48            </div>
49            <transition v-on:before-enter="onBeforeEnter" v-on:enter="onEnter" v-on:before-leave="onBeforeLeave"
50                v-on:leave="onLeave">
51                <div class="body" v-show="show">
52                    <div class="body-inner">
53                        <slot>
54                            アコーディオンパネル<br>
55                            アコーディオンパネル<br>
56                            アコーディオンパネル<br>
57                            アコーディオンパネル<br>
58                            アコーディオンパネル<br>
59                            アコーディオンパネル<br>
60                            アコーディオンパネル<br>
61                            アコーディオンパネル<br>
62                            アコーディオンパネル<br>
63                            アコーディオンパネル<br>
64                            アコーディオンパネル<br>
65                            アコーディオンパネル<br>
66                            アコーディオンパネル<br>
67                            アコーディオンパネル<br>
68                            アコーディオンパネル<br>
69                            アコーディオンパネル<br>
70                            アコーディオンパネル<br>
71                            アコーディオンパネル<br>
72                            アコーディオンパネル<br>
73                        </slot>
74                    </div>
75                </div>
76            </transition>
77        </div>
78    </div>
79
80    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.9/vue.js"></script>
81    <script>
82
83        var app = new Vue({
84            el: '#app',
85            data: {
86                show: true,
87            },
88            methods: {
89                toggle: function () {
90                    this.show = !this.show;
91                },
92
93                onBeforeEnter: function (el) {
94                    el.style.height = 0;
95                },
96
97                onEnter: function (el) {
98                    el.style.height = el.scrollHeight + 'px';
99                },
100
101                onBeforeLeave: function (el) {
102                    el.style.height = el.scrollHeight + 'px';
103                },
104                onLeave: function (el) {
105                    el.style.height = 0;
106                }
107            }
108        })
109
110    </script>
111</body>
112
113</html>

行動規範の内容に同意します

回答2件

ベストアンサー

応急処置のみの回答ですが、1もしくは2で対処できます。もっといい方法があるかもしれません。

1: アコーディオンボディにあらかじめ高さを与えておく。

html
1<div class="body" v-show="show" style="height: 472px;">

2: createdのタイミングであらかじめ高さを与える

js
1...
2created: function () {
3    const el = document.querySelector('#app .accordion .body');
4    el.style.height = el.scrollHeight + 'px';
5},
6methods: {
7...

問題の特定ですが、次のようにonBeforeEnterなどのメソッドにコンソールを仕込み、デバッガを使って値や挙動を確認し、どのタイミングでどんな振る舞いか確認して絞り込めます。

js
1...
2onBeforeEnter: function (el) {
3    console.log('onBeforeEnter------------------------------')
4    console.log(el.style.height)
5    el.style.height = 0;
6    console.log(el.style.height)
7},
8...