vue2.0 transition 手风琴

<div class="food">

<button @click="show=!show">show</button>

<transition name="move">

<p v-show="show">hello</p>

</transition>

</div>

 

 

 

.move-enter{

max-height: 0;

}

.move-enter-active {

max-height: 480px;

-webkit-transition: max-height .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);

transition: max-height .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);

}

.move-leave {

max-height: 0;

}

.move-leave-active {

max-height: 0;

-webkit-transition: max-height .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);

transition: max-height .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);

}