Animacja parametru height CSS

pytanie zadane 26 czerwca 2021 w HTML i CSS przez Renzov Obywatel (1,220 p.)
edycja 26 czerwca 2021 przez Renzov

Hej,

Tworzę rozwijane tabsy i mam pewien problem. Tab działa tak, że w momencie kliknięcia się rozwija (Dodaje klasę css tab-content-visible z wysokością np. 500px, bez tej klasy ma height: 0). Problem polega na tym, że transition nie działa w momencie ustawienia automatycznej albo defaultowej wysokości. Czy ktoś może zna jakiś myk aby animacja działa? :)

<template>
<div>
    <div @click="switchTab" class="more-details">
        <span>{{tab.title}}</span>
        <span class="more-details-arrow" :class="isOpen ? 'rotate-arrow' : '' "><i class="fas fa-chevron-right"></i></span>
    </div>
    <div class="more-details-text" :class="isOpen ? 'more-details-text-open' : '' ">
        <div>{{tab.body}}</div>
    </div>
</div>
</template>

<script>
export default{
    data(){
        return{
            isOpen: false
        }
    },
    props:{
        tab: Object
    },
    methods:{
        switchTab(){
            this.isOpen ? this.isOpen = false : this.isOpen = true
        }
    }
}
</script>

<style scoped>
.more-details-text{
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease;
}
.more-details-text-open{
    height: auto;
}
.more-details-arrow{
    transform: rotate(180deg);
    transition: transform 0.5s ease;
}
.rotate-arrow{
    transform: rotate(90deg);
}
</style>