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