Vue Akkordeon mit Übergang

Question

Ich versuche, die Accordion Komponente mit einem Körper Übergang zu integrieren, aber ohne Erfolg :(Alles funktioniert auch mit Ausnahme der Animation

Vorlage:..

<div class="accordion"> 
    <div class="accordion-title" @click="isOpen = !isOpen" :class="{'is-open': isOpen}"> 
     <span>{{title}}</span> 
     <i class="ic ic-next"></i> 
    </div> 
    <div class="accordion-body" :class="{'is-open': isOpen}"> 
     <div class="card"> 
     <slot name="body"></slot> 
     </div> 
    </div> 
    </div> 

Komponente:

props: { 
    title: { 
     type: String, 
     default: 'Title' 
    } 
    }, 
    data() { 
    return { 
     isOpen: false 
    } 
    } 

und Stile:

.accordion-body { 
    font-size: 1.3rem; 
    padding: 0 16px; 
    transition: .3s cubic-bezier(.25,.8,.5,1); 
    &:not(.is-open) { 
    display: none; 
    height: 0; 
    overflow: hidden; 
    } 
    &.is-open { 
    height: auto; 
    // display: block; 
    padding: 16px; 
    } 
} 

.card { 
    height: auto; 
} 

Ich versuchte <transition> zu verwenden, aber es mit height oder display Eigenschaften funktioniert nicht. Hilfe bitte!

Answer 1

display:none Ihre Inhalte zu entfernen und um die Animation zu vermeiden, sollten Sie Trick mit opacity, overflow:hidden und height, aber werden Sie eine Methode zu tun für die gezwungen werden.

Zum Beispiel (nicht getestet, aber inspirierend):

in Vorlage:

<div class="accordion" @click="switchAccordion" :class="{'is-open': isOpen}"> 
    <div class="accordion-title"> 
    <span>{{title}}</span> 
    <i class="ic ic-next"></i> 
    </div> 
    <div class="accordion-body"> 
    <p></p> 
    </div> 
</div> 

in der Komponente (fügen Sie eine Methode):

methods: { 
    switchAccordion: function (event) { 
     let el = event.target 
     this.isOpen = !this.isOpen // switch data isOpen 
     if(this.isOpen) { 
     let childEl1 = el.childNodes[1] 
     el.style.height = childEl1.style.height 
     } else { 
     let childEl2 = el.childNodes[2] 
     el.style.height = childE2.style.height // or .clientHeight + "px" 
     } 
    } 
    } 

in Stil :

.accordion { 
    transition: all .3s cubic-bezier(.25,.8,.5,1); 
} 

.accordion-body { 
    font-size: 1.3rem; 
    padding: 0 16px; 
    opacity:0 
} 

.is-open .accordion-body { 
    opacity:0 
} 

In diesem Fall sollte Ihr Übergang wie gewünscht funktionieren. Die Javascript wird den Höhenwert ändern und Übergang transition: all .3s cubic-bezier(.25,.8,.5,1); wird die Animation