时间戳

首页 > 解决方案 > 在 Nuxt 中切换导航动画

vue.js - 在 Nuxt 中切换导航动画

问题描述

GSAP在将导航切换到视图时，我使用了一个简单的动画。我正在 Nuxt/Vue 中构建这个站点（这对我来说是新的）所以我认为问题可能是我如何构建我的函数。

我的导航切换按钮和导航布局位于两个独立的组件中，因此我习惯Vuex在它们之间传递数据以添加/删除活动状态。逻辑/动画适用于页面加载，单击切换以激活导航并查看动画中的加载。问题是在关闭时动画菜单。出于某种原因，我不断收到Cannot read property 'querySelectorAll' of undefined，我认为这是由于Nuxt SSR在页面加载时运行并尝试运行该animateNavOut功能（当它不应该运行时）。

正如我所提到的，Vue/Nuxt 对我来说是新的，所以任何让这个代码工作的建议/更好的方法都将不胜感激。

导航组件

<template>
  <transition name="card">
    <div class="nav" :class="toggleNav()">
      <div class="nav__panel">
        <div class="nav__panel-inner">
          <div class="nav__panel-contact">
            <div class="h-3">Contact Us</div>
            <ul>
              <li>
                <a href="tel:07498-916-341">+44(0)7498 916 341</a>
              </li>
            </ul>
            <div class="nav__panel-social">
              <SocialLinks />
            </div>
          </div>
        </div>
      </div>
      <div class="nav__panel">
        <div class="nav__panel-inner">
          <nav class="nav__panel-nav">
            <ul>
              <li>
                <NuxtLink to="/">Home</NuxtLink>
              </li>
              <li>
                <NuxtLink to="/about-us">About Us</NuxtLink>
              </li>
              <li>
                <NuxtLink to="/our-expertise">Our Expertise</NuxtLink>
              </li>
              <li>
                <NuxtLink to="/contact-us">Contact Us</NuxtLink>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { gsap } from 'gsap'

export default {
  data() {
    return {
      isActive: 'is-active',
    }
  },

  methods: {
    toggleNav() {
      if (this.$store.state.navIsActive === true) {
        this.animateNavIn()
        return this.isActive
      } else {
        this.animateNavOut()
      }
    },

    animateNavIn() {
      console.log('animate in')

      const TL = gsap.timeline()

      TL.to('.nav__panel-nav ul li a', {
        duration: 1,
        autoAlpha: 1,
        y: 0,
        stagger: 0.05,
        ease: 'Power2.out',
      }).to(
        '.nav__panel-contact .h-3, li, .social__title, .social__links',
        {
          duration: 1,
          autoAlpha: 1,
          y: 0,
          stagger: 0.05,
          ease: 'Power2.out',
        },
        '-=.9',
      )
    },

    animateNavOut() {
      console.log('animate out')

      const TL = gsap.timeline()

      TL.to('.nav__panel-nav ul li a', {
        duration: 1,
        autoAlpha: 0,
        y: '15px',
        stagger: 0.05,
        ease: 'Power2.out',
      })
    },
  },
}
</script>

导航切换

<template>
  <button class="nav-toggle" :class="{ 'is-active': isActive }" @click="navToggle()">
    <span></span>
  </button>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
    }
  },

  computed: {
    // Return default/current value for nav status from VUEX using Getter
    navState() {
      return this.$store.getters.navState
    },
  },

  methods: {
    navToggle() {
      // Set toggle active state
      this.isActive = !this.isActive

      // Update nav status by passing state back into VUEX using mutations
      if (this.$store.state.navIsActive === false) {
        this.$store.commit('setNavState', true)
        document.getElementsByTagName('body')[0].classList.add('no-scroll')
      } else {
        this.$store.commit('setNavState', false)
        document.getElementsByTagName('body')[0].classList.remove('no-scroll')
      }
    },
  },
}
</script>

Vuex商店

export const state = () => ({
  navIsActive: false
});

export const getters = {
   // Retrieve info from Store or use computed property, but a getter can be used everywhere
   navState(state) {
    return state.navIsActive;
  }
}

export const mutations = {
  // Update nav status based on payload passed in via method function in component
  setNavState(state, payload) {
    state.navIsActive = payload;
  }
}

标签： vue.jsnuxt.jsgsap

解决方案

我从未尝试过导入香草 GSAP 包，但 Nuxt 运行良好且易于安装：nuxt-gsap-module

你确实有一个错误querySelectorAll，问题是你不应该在像 VueJS 这样的 SPA 中使用这种选择器。您应该按照文档$refs中所示使用，就像这样

<base-input ref="usernameInput"></base-input>

<script>
  // ...
  this.$refs.usernameInput
</script>

阅读此页面，您可以在其中看到一些关于如何使用 GSAP 制作动画的 VueJS 示例：https ://vuejs.org/v2/cookbook/editable-svg-icons.html#Animatable-Icons

推荐阅读