在 Nuxt 中切换导航动画

Posted 2023-02-23

【中文标题】在 Nuxt 中切换导航动画

【英文标题】：Toggle nav animation in Nuxt

【发布时间】：2021-08-14 10:04:24

【问题描述】：

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

我的导航切换按钮和导航布局位于两个独立的组件中，因此我使用Vuex 在它们之间传递数据以添加/删除活动状态。逻辑/动画适用于页面加载，单击切换以激活导航并查看动画中的加载。问题是在关闭时动画菜单。出于某种原因，我不断收到Cannot read property 'querySelectorAll' of undefined，我认为这是由于Nuxt s-s-r 在页面加载时运行并尝试运行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:[phone]">[phone]</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;
  

【参考方案1】：

我从未尝试过导入原版 GSAP 包，但 Nuxt 运行良好且安装简单：nuxt-gsap-module

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

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

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

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