html下拉和收起,Vue中实现菜单下拉、收起的动画效果

菜单的下拉和收起动画，看起来好像比较简单，但是搞了半天。

最后可以使用的代码：

name="default"

v-on:enter="menuEnter"

v-on:leave="menuLeave"

enter-class="default-enter"

leave-to-class="default-leave-to"

>

v-for="(subnode, subIndex) in node.children"

:key="subnode.id"

@click.prevent="handleChildNodeClick(subnode, subIndex)"

class="node-l2"

:class="{ ‘node-l2-active‘ : (subIndex == activeChildNodeIndex)}"

>{ { subnode.name }}

js，这里是vue中的methods部分

menuEnter: function(el, done) {

//这行是关键

el.offsetWidth;

el.style.maxHeight = this.nodes[this.activeParentNodeIndex].children.length * 4 + "rem";

el.style.transition = "al