vue transition实现菜单栏点击依次展开收起（c）

转载：原博文
效果

jQuery
jquery可以使用toggle属性直接实现。

vue
使用<transition></transition>把需要动作的元素包起来即可。

html

  <div class="box1" @click="show1=!show1">分类1</div>
        <transition name="draw">
            <ul v-show="show1===true">
                <li>ff</li>
                <li>gg</li>
                <li>gg</li>
                <li>gg</li>
                <li>gg</li>
                <li>gg</li>
            </ul>
        </transition>

css

.draw-enter-active,.draw-leave-active {
		transition: all .3s ease;         
        max-height: 500px; 
}

.draw-enter,.draw-leave-to{
         height: 0;          
         opacity: 0;
}

其中max-height是为了避免动作列表的高度不一致或不知道动作列表的高度。