vue 动画过渡 手风琴

Question

为什么实现不了手风琴？

<style>

    .collapse-enter{

        max-height: 0;

    }

    .collapse-enter-active {

        max-height: 10rem;

        -webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);

        transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);

    }

    .collapse-leave {

        max-height: 10rem;

    }

    .collapse-leave-active {

        max-height: 0;

        -webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);

        transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);

    }

</style>

<h1 @click="detail = !detail">Title</h1>

<transition name="collapse">

    <p v-show="detail">

        在纽约长岛的一家餐吧里有一只132岁的大龙虾。这只纽约最老的龙虾名叫Louie，重22磅（约20斤），20年来，它一直生活在一家餐吧里，餐吧主人Butch Yamali就像养了一只宠物一样，把它养在水族箱里。

    </p>

</transition>

data: {

    detail: false,

}