为什么实现不了手风琴?
<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,
}
不知道你这里的是不是就是完整的代码了,我对你的代码稍作修改之后就能正常运行了。代码的逻辑和CSS样式写得没有问题。如果上面就是你的完整代码,那上面的错误在于,你没有挂载实例。