vue實現下拉收起動畫

參考鏈接：vuejs如何實現這樣的展開收起動畫？

我選取了其中一個使用max-height的效果，代碼如下：

<transition name="sub-comments">
    // searchCondition是自己封裝的查詢條件組件
    <searchCondition v-show="isShow"
                              @clickCollapse="clickSearchCondition">            
    </searchCondition>
</transition>

// css代碼：
// 這部分代碼單獨寫就可以
// 下拉收起的動畫效果
.sub-comments-leave-active,.sub-comments-enter-active {
    transition: max-height 0.5s linear;
}
.sub-comments-enter,.sub-comments-leave-to {
    max-height:0 ;
    opacity: 0;
}
.sub-comments-enter-to,.sub-comments-leave {
    max-height: 136px ;
}