菜單的下拉和收起動(dòng)畫，看起來好像比較簡(jiǎn)單，但是搞了半天。

最后可以使用的代碼：

        <transition
          name="default"
          v-on:enter="menuEnter"
          v-on:leave="menuLeave"
          enter-class="default-enter"
          leave-to-class="default-leave-to"
        >
          <ul v-if="hasChildren(node, index)" class="menu-l2">
            <li
              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 }}</li>
          </ul>
        </transition>

js，這里是vue中的methods部分

    menuEnter: function(el, done) {
    //這行是關(guān)鍵
      el.offsetWidth;
      el.style.maxHeight =  this.nodes[this.activeParentNodeIndex].children.length * 4 + "rem";
      el.style.transition = "all 0.3s ease-in";
      done();
    },
    menuLeave: function(el) {
      el.offsetWidth;
      el.style.maxHeight = 0;
      el.style.transition = "all 0.3s ease-out";
    }

css:

//transitions
.default-enter-active {
    transition: all 0.3s ease-in;
}

.default-leave-active {
    transition: all 0.3s ease-out;
}

.default-enter,
.default-leave-to {
    max-height: 0;
}

說明

這里結(jié)合了js和css，其實(shí)只用js也可以，但是稍微麻煩。

只用css也可以，但是效果會(huì)稍微差一些（后面會(huì)解釋）。

---

這里實(shí)現(xiàn)下拉和收起，利用的css的transition。
vue中定義了三個(gè)狀態(tài)，對(duì)應(yīng)顯示，分別是（事件/css類）

before-enter/v-enter：動(dòng)畫開始/初始狀態(tài)
enter/v-enter-active：動(dòng)畫過程/中間狀態(tài)
after-enter/v-enter-to：動(dòng)畫結(jié)束/結(jié)束狀態(tài)

對(duì)于隱藏（leave）也同樣

計(jì)算過度高度

這里對(duì)于顯示，利用的是max-height屬性，第一個(gè)關(guān)鍵點(diǎn)在于，初始狀態(tài)max-height設(shè)置為0，在中間狀態(tài)設(shè)置為下拉框的實(shí)際大小。這樣才會(huì)出現(xiàn)高度變化的下拉效果。

這也就是為什么使用js hook，而不是直接使用css的原因呢，因?yàn)樽硬藛胃叨葻o法確切知道，如果對(duì)效果不敏感，可以直接指定一個(gè)較大的max-height，但是為了效果好，還是根據(jù)菜單長(zhǎng)度確定過度最好。

控制頁面刷新

第二個(gè)關(guān)鍵點(diǎn)在于 el.offsetWidth;這一句看似無用的代碼，不加的話，瀏覽器不會(huì)有動(dòng)畫效果，加上以后，按照網(wǎng)上的說法，會(huì)強(qiáng)制觸發(fā)繪制。

其實(shí)在vue的官方文檔有提到

When using JavaScript-only transitions, the done callbacks are required for the enter and leave hooks. Otherwise, the hooks will be called synchronously and the transition will finish immediately.

但是我測(cè)試了一下，調(diào)用done()還是沒有效果，不清楚原因。

總結(jié)

以上是生活随笔為你收集整理的Vue中实现菜单下拉、收起的动画效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。