Question

我正在尝试在我的Nuxt项目中添加ScollMagic，我关注了这篇文章：https://nuxtjs.org/guide/plugins＆我在nuxt.config.js中添加了ScrollMagic.js，但我遇到了这个问题：ReferenceError窗口未定义。

module.exports = {
 plugins: [
    { src: '~plugins/ScrollMagic', mode: 'client' }
  ],
}

Then I've added this snippet in my component:
import ScrollMagic from 'scrollmagic'

我仍然有这个问题...

即使像这样覆盖它：

if (process.client) {
  Vue.use(ScrollMagic)
}

Answer 1

我知道这个问题有点老了，但是也许有人会觉得我的帮助很有帮助。

编辑：另外，通过这种方式，您可以将任何插件注册到nuxt：）。

那我做了什么：

1。 npm i scrollmagic

转到nuxt.config.js并将以下内容添加到您的插件部分：

{ src: '~/plugins/ScrollMagic.js', mode: 'client' }

这将确保scrollmagic仅包含在客户端中。这样可以防止window undefined错误。

转到plugins文件夹，或将其放在根文件夹中并制作一个名为ScrollMagic.js的新文件。在此处添加以下内容：

import Vue from 'vue';
import * as ScrollMagic from 'scrollmagic';

Object.defineProperty(Vue.prototype, '$scrollmagic', { value: ScrollMagic });

此代码段将使变量$ scrollmagic在每个组件/页面中可用。您可以调用this.$scrollmagic来使用它。例如const controller = new this.$scrollmagic.Controller();

希望这对任何人都有帮助。

Answer 2

使用 cdn 并集成到“nuxt.config.js”中。

script: [
  {
    src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js",
    async: 'async',
    ssr: false,
    defer: true,
    body: true,
  },
  {
    src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js",
    async: 'async',
    ssr: false,
    defer: true,
    body: true,
  },
 {
    src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js",
    async: 'async',
    ssr: false,
    defer: true,
    body: true,
  },
] },

在组件中

Anim() {
    if (process.browser && window) {
      const ScrollMagic = window.ScrollMagic;
      const bookTimeline = new TimelineMax({});
      bookTimeline
        .from(".hmbookservice-container", 0.6, {
          yPercent: 20,
          opacity: 0,
          ease: Power4.easeOut,
          clearProps: "all"
        })
        .from(
          ".hmservice-textwrap h4",
          0.6,
          {
            xPercent: 20,
            opacity: 0,
            ease: Power4.easeOut,
            clearProps: "all"
          },
          "-=.1"
        )
        .from(
          ".hmservice-btnwrap",
          0.6,
          {
            xPercent: 20,
            opacity: 0,
            ease: Power4.easeOut,
            clearProps: "all"
          },
          "-=.2"
        );

      const bookController = new ScrollMagic.Controller();
      const bookAnimScene = new ScrollMagic.Scene({
        triggerElement: ".hmbookservice-container",
        reverse: false,
        offset: -200
      })
        .setTween(bookTimeline)
        .addTo(bookController);
    }
  }
  mounted() {
    if (process.browser && window) {
      this.Anim();
    }
  }

Answer 3

对于Vue / Nuxt项目，您可以使用vue-scrollmagic插件。

Answer 4

当前有效的方法是使用CDN并集成到“ nuxt.config.js”中。像这样：

      head: {
...
script: [
  {
    src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js",
    async: 'async',
    ssr: false,
    defer: true,
    body: true,
  },
  {
    src: "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js",
    async: 'async',
    ssr: false,
    defer: true,
    body: true,
  },
] },

在组件中：

export default {
mounted () {
  if (process.client) {
    var controller = new ScrollMagic.Controller()
    var scene = new ScrollMagic.Scene({ triggerElement: '#trigger1' })

      // exemple : trigger animation by adding a css class

      .setClassToggle('#animate1', 'zap')
      .addIndicators({ name: '1 - add a class' }) // add indicators (requires plugin)
      .addTo(controller)
  }
}}

您可以使用npm或[puglins]将这种方法用于其他在nuxt上不可用的puglins

Answer 5

这是Drew Baker的回答。

我认为您正在使它变得比应有的复杂。在Nuxt中使用GSAP非常简单。

npm install gsap在您的终端中。
在要制作动画的文件中，导入gsap。在脚本标签中：import { gsap } from 'gsap'。
使用GSAP就像使用它一样。 const lt = gsap.timeline();。

如果您仍要按照我在另一条评论中所述使用GSAP：

从另一个comment开始执行步骤1和2。
在上一条注释的第3步中，在其中导入Vue和GSAP创建一个名为“ gsap.js”的文件。

import Vue from 'vue';
import { gsap } from 'gsap';

Object.defineProperty(Vue.prototype, '$gsap', { value: gsap });

希望这对@Drew Baker有帮助！

如何在nuxt项目中添加ScrollMagic？

5 个答案: