Pourquoi ne pouvons-nous pas mettre en œuvre l’accordéon ?
<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,
}
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Je ne sais pas si le code que vous avez ici est le code complet. Je peux l'exécuter normalement après avoir légèrement modifié votre code. La logique du code et le style CSS sont écrits sans problème. Si ce qui précède correspond à votre code complet, l'erreur ci-dessus est que vous n'avez pas monté l'instance.