hypernym-studio/nuxt-anime

Not working on Nuxt.js with TypeScript.

Lunari8546 opened this issue · 1 comments

Lunari8546 commented

I tried the method of #4 which suggests using the plugin system. I followed the step and got no errors, I tried to test it but the animation is still not popping up.

<font-awesome-icon class="bars" v-if="!enabled" v-on:click="menuEnable" :icon="['fas', 'bars']"/>
<nav class="nav" v-if="enabled">
  <NuxtLink class="link" to="/about">About</NuxtLink>
  <NuxtLink class="link" to="/blog">Blog</NuxtLink>
  <NuxtLink class="link" to="/contact">Contact</NuxtLink>
  <NuxtLink class="link" to="/projects">Projects</NuxtLink>
</nav>

<script lang="ts">
import Vue from "vue";

declare module 'vue/types/vue' {
  interface Vue {
    $anime({}) : void
  }
}

export default Vue.extend({
  ...
  data: () => ({
    enabled: false
  }),
  methods: {
    menuEnable() {
      this.enabled = true;

      this.$anime({
        targets: ".nav",
        translateX: 250,
        duration: 800
      })
    },
    ...
  }
})
</script>
ivodolenc commented

If you are using Nuxt plugin system (manually using external sources in separate plugins) then you do not need this module.

For typescript support, I suggest you manually install anime.js (Follow steps from #4).

  1. Install animejs
  2. Install @types/animejs (dev)
  3. Setup this.$anime using the plugin system and extend the Vulcan interface as per the cookbook.

I also can't debug the incomplete code you provided.

  • 👍1