<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡动画</title>
</head>
<body>
    <div id="app" class="container center">
        <ul class="menu">
            <li class="folder">
                <label v-bind:class="{'open':open}" v-on:click="toggle">{{treeData.name}}</label>
            </li>
            <ul v-show="open" v-if="isFolder">
                <li v-for="(item,index) in treeData.children" v-bind:key="index" class="item">
                    <label>{{item.name}}</label>
                </li>
            </ul>
        </ul>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                open:false,
                treeData:{
                    name:'Web开发',
                    children:[
                        {
                            name:'前端开发技术'
                        },
                        {
                            name:'后端开发技术'
                        },
                        {
                            name:'全栈开发技术'
                        }
                    ]
                }
            },
            computed:{
                isFolder(){
                    return this.treeData.children && this.treeData.children.length > 0;
                }
            },
            methods:{
                toggle(){
                    if(this.isFolder){
                        this.open = !this.open;
                    }
                }
            }
        });
    </script>

    <style type="text/css">
        *,
        *::after,
        *::before{
            box-sizing: border-box;
        }

        body{
            margin: 0;
        }

        .container{
            min-height: 100vh;
        }

        .center{
            display: flex;
            justify-content: center;
            align-items: center;
        }

        ul{
            list-style: none;
            padding: 0px;
        }

        .menu{
            width: 100%;
            max-width: 600px;
            margin: auto;
            background-color: #bbbbbb;
        }

        .menu label{
            position: relative;
            display: block;
            padding: 18px 18px 18px 45px;
            color: #000000;
            cursor: pointer;
        }

        .menu label::before{
            display: inline-block;
            position: absolute;
            top:50%;
            left: 18px;
            transform: translateX(-50%);
            font-size: 20px;
            line-height: 1;
            height: 22px;
        }

        .menu li.item > label::before{
            content: "-";
        }

        .menu li.folder > label::before{
            content: ">";
        }

        .menu label.open::before{
            transform: translateY(-45%) rotate(90deg);
        }

        .menu ul{
            background-color: #dddddd;
            padding-left: 20px;
        }
    </style>
</body>
</html>