為什麼實現不了手風琴？
<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,
}
typecho2017-06-26 10:57:42
不知道你這裡的是不是就是完整的程式碼了，我對你的程式碼稍作修改之後就能正常運作了。程式碼的邏輯和CSS樣式寫得沒有問題。如果上面就是你的完整程式碼，那上面的錯誤在於，你沒有掛載實例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>collapse</title>
<script src="http://cdn.staticfile.org/vue/2.0.3/vue.js"></script>
<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>
</head>
<body>
<p id="app">
<h1 @click="detail = !detail">Title</h1>
<transition name="collapse">
<p v-show="detail">
在纽约长岛的一家餐吧里有一只132岁的大龙虾。这只纽约最老的龙虾名叫Louie，重22磅（约20斤），20年来，它一直生活在一家餐吧里，餐吧主人Butch Yamali就像养了一只宠物一样，把它养在水族箱里。
</p>
</transition>
</p>
<script>
new Vue({
el: "#app",
data: {
detail: false
}
});
</script>
</body>
</html>