• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Animacja parametru height CSS

Aruba Cloud - Virtual Private Server VPS
0 głosów
372 wizyt
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>

 

komentarz 26 czerwca 2021 przez niezalogowany
podeślij kod proszę.
komentarz 26 czerwca 2021 przez Renzov Obywatel (1,220 p.)
Zrobione!

Podobne pytania

+3 głosów
2 odpowiedzi 512 wizyt
pytanie zadane 17 czerwca 2022 w HTML i CSS przez Mick_SQ6IYV Obywatel (1,020 p.)
+1 głos
2 odpowiedzi 393 wizyt
0 głosów
1 odpowiedź 233 wizyt
pytanie zadane 15 grudnia 2017 w HTML i CSS przez ildan91 Użytkownik (630 p.)

93,335 zapytań

142,331 odpowiedzi

322,415 komentarzy

62,670 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...