极客观点
项目管理
HarmonyOS
要模仿的效果（能实现点击下拉过渡效果即可）
我的效果：为什么点击之后子菜单不能跟着过渡。。。
我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#main {
background-color: rgba(7, 17, 27, 0.3);
width: 200px;
}
.fade-enter-active, .fade-leave-active{
transition: height 0.5s
}
.fade-enter, .fade-leave-to{
height: 0
}
</style>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="main">
<button @click="test">点击</button>
<transition name="fade">
<ul v-if="show">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</transition>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#main',
data: {
show: false
},
methods: {
test () {
this.show = !this.show;
}
}
});
</script>
</body>
</html>
这不关vue的事，这是css transition 当height从0到auto是无效的。height需给一个固定值 transition 才有效。