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>