Vue过渡效果问题

要模仿的效果(能实现点击下拉过渡效果即可)
图片描述

我的效果:为什么点击之后子菜单不能跟着过渡。。。
图片描述

我的代码:

<!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>
阅读 3.2k
评论
    4 个回答
    • 4.2k

    这不关vue的事,这是css transition 当height从0到auto是无效的。height需给一个固定值 transition 才有效。

      相似问题
      推荐文章