Vue.js 在Nuxt中切换导航动画

我有一个简单的动画，在将导航切换到视图时使用

GSAP

。我正在用Nuxt/Vue（对我来说是新的）构建这个站点，所以我认为问题可能是我如何构建我的功能

我的导航切换按钮和导航布局位于两个独立的组件中，因此我使用了

Vuex

在它们之间传递数据，以添加/删除活动状态。对于要加载的页面，逻辑/动画工作正常，单击切换以激活导航，并在动画中查看加载。问题在于在关闭时设置菜单的动画。由于某些原因，我一直无法读取未定义的的属性'querySelectorAll'，我认为这是由于在页面加载时运行了

Nuxt SSR

，并试图运行

animateNavOut

函数（当它不应该运行时）

正如我提到的，Vue/Nuxt对我来说是新的，所以如果有任何建议可以让这段代码更好地工作，我们将不胜感激

导航分量

联系我们






家


关于我们


我们的专长


联系我们


从“gsap”导入{gsap}
导出默认值{
数据（）{
返回{
isActive:'是活动的'，
}
},
方法：{
toggleNav（）{
if（this.$store.state.navIsActive==true）{
这个。animateNavIn（）
把这个还给我
}否则{
这个.animateNavOut（）
}
},
animateNavIn（）{
console.log（'animate in'）
const TL=gsap.timeline（）
TL.to（'导航面板-nav ul li a'{
持续时间：1，
自动α：1，
y:0，
错距：0.05，
轻松：'Power2.out'，
}).到(
“.nav_uuupanel-contact.h-3，li、.social_uuutitle、.social_uuulinks”，
{
持续时间：1，
自动α：1，
y:0，
错距：0.05，
轻松：'Power2.out'，
},
'-=.9',
)
},
动画片{
console.log（'animate out'）
const TL=gsap.timeline（）
TL.to（'导航面板-nav ul li a'{
持续时间：1，
自动Alpha:0，
y:‘15px’，
错距：0.05，
轻松：'Power2.out'，
})
},
},
}

导航开关

导出默认值{
数据（）{
返回{
I：错，
}
},
计算：{
//使用Getter从VUEX返回导航状态的默认值/当前值
导航状态（）{
返回此。$store.getters.navState
},
},
方法：{
navToggle（）{
//设置切换激活状态
this.isActive=！this.isActive
//通过使用变异将状态传递回VUEX来更新导航状态
if（this.$store.state.navIsActive==false）{
此.$store.commit（'setNavState'，true）
document.getElementsByTagName（'body'）[0]。classList.add（'no-scroll'））
}否则{
此.$store.commit（'setNavState'，false）
document.getElementsByTagName（'body'）[0]。classList.remove（'no-scroll'））
}
},
},
}

Vuex商店

export const state=（）=>({
导航：错误
});
导出常量getter={
//从Store或use computed属性中检索信息，但getter可以在任何地方使用
导航状态（状态）{
返回状态。导航活动；
}
}
导出常量突变={
//根据通过组件中的方法函数传入的有效负载更新导航状态
设置导航状态（状态、有效负载）{
state.navIsActive=有效载荷；
}
}

我从未尝试导入vanilla GSAP软件包，但Nuxt软件包运行良好，安装简单：

您的

querySelectorAll

确实存在错误，问题是您不应该在类似SPA的VueJS中使用这种选择器。您应该使用中所示的

$refs

，如下所示

// ...
这是。$refs.usernameInput

阅读本页，您可以看到一些有关如何使用GSAP设置动画的VueJS示例：