Javascript Velocity.js不使用Nuxt中的元素

我正在用Bulma构建一个导航栏，并希望使用Velocity.js将导航项目设置为动画（向下滑动）

以下是我的代码，默认布局文件中的AppNav Bulma组件：

<template>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <nuxt-link
        class="navbar-item"
        to="/"
      >
        <h1 class="is-size-4" @click="closeNav">Brand</h1>
      </nuxt-link>

      <a
        role="button"
        class="navbar-burger burger"
        @click="isOpen = !isOpen"
      >
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <transition
      name="slide-down"
      @enter="enter"
      @leave="leave"
      :css="false"
    >
      <div
        class="navbar-menu"
        v-bind:class="{ 'is-active': isOpen }"
      >
        <div class="navbar-end" @click="closeNav">
          <nuxt-link class="navbar-item" to="about"
            >About</nuxt-link
          >
          <div class="navbar-item">
            <nuxt-link
              to="contact"
              class="button is-black is-normal"
              style="padding: 6px;"
            >
              <strong>Contact</strong>
            </nuxt-link>
          </div>
        </div>
      </div>
    </transition>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    closeNav() {
      if (this.isOpen === true) {
        this.isOpen = false;
      }
    },
    enter(el, done) {
      Velocity(
        el,
        "slideDown",
        {
          duration: 10000,
          easing: "easeOutCubic",
          complete: done
        }
      );
    },
    leave(el, done) {
      Velocity(
        el,
        "slideDown",
        {
          duration: 500,
          easing: "easeInCubic",
          complete: done
        }
      );
    }
  }
};
</script>

Uncaught (in promise) Velocity: No elements supplied, if that is deliberate then pass `promiseRejectEmpty:false` as an option. Aborting.