test-accordion-01

index.vue

  <template>
    <div class="app">
        <div class="components">
            <p class="title">アコーディオン1</p>
            <transition
               name="expand"
               @before-enter="beforeEnter"
               @enter="enter"
               @before-leave="beforeLeave"
               @leave="leave"
            >
                <div v-show="isShow" class="body">
                    <p>アコーディオン1の中身</p>
                    <p>アコーディオン1の中身</p>
                    <p>アコーディオン1の中身</p>
                </div>
            </transition>
        </div>
        <button v-on:click="isShow = !isShow">ボタン</button>
    </div>
</template>

<script>
export default {
    name: "Index",
    data() {
        return {
            isShow: true
        };
    },
    methods: {
        beforeEnter(el) {
            el.style.height = "0";
        },
        enter(el) {
            el.style.height = el.scrollHeight + "px";
        },
        beforeLeave(el) {
            el.style.height = el.scrollHeight + "px";
        },
        leave(el) {
            el.style.height = "0";
        }
    }
}
</script>

<style scoped lang="scss">
.components {
    width: 300px;
    text-align: center;
    font-weight: bold;
}
.title {
    padding: 0;
    margin: 0;
    border-color: #666;
    border-style: solid;
    background: #fff;
    font-size: 130%;
}
.body {
   border-color: #666;
   border-style: solid;
   background: #F0F0F0;
}
.expand-enter-active,
.expand-leave-active {
    transition: height .5s ease-in-out;
    overflow: hidden;
}

.expand-enter,
.expand-leave-to {
    height: 0;
}
</style>