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);会做动画