Vue的手風琴過渡

Question

我想給Accordion組件與車身的過渡整合，但沒有成功:(所有的工作，以及除動畫

模板：。

<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> 

組分：

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

種風格：

.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; 
} 

我試圖用<transition>但它不與height或display性工作。 請幫忙！

Answer 1

display:none將刪除你的內容，避免動畫，你應該opacity，overflow:hidden和height伎倆，但你會被迫做了一個方法。

例如（未測試，但激勵）：

在模板：

<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> 

在組分（添加法）：

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" 
     } 
    } 
    } 

在風格：

.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 
} 

在這種情況下，您的轉換應該按照您的要求工作。 的JavaScript將改變高度值和過渡transition: all .3s cubic-bezier(.25,.8,.5,1);會做動畫