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