Question

我正在使用nuxt.js和Green Sock（GSAP）动画构建一个投资组合页面，用于加载，菜单和页面转换。适应GSAP比使用基于CSS的转换更困难，但我觉得结果是值得的。

我没有正确使用webpack和nuxt来使所有内容更加模块化和简洁。我需要一些帮助来更好地导出变量和函数，更好地使用Vue.js反应属性，并利用什么是已经可以使用而不是反对它。

我的default.vue文件有一个管理菜单的方法：

showMenu() {
  if (process.browser) {
    var tl = new TimelineMax();

    var slide = document.querySelector("#slide-menu");
    var pl = document.querySelector("body");
    var nl = document.querySelectorAll(".nav-link");

    if (this.$store.state.menuIsActive === false) {
      tl
        .to(slide, 0.5, {
          y: "100%",
          ease: this.$store.state.animParams.ease
        })
        .staggerTo(
          nl,
          this.$store.state.animParams.dur3,
          {
            y: "-10px",
            autoAlpha: 1,
            ease: this.$store.state.animParams.ease
          },
          this.$store.state.animParams.dur2
        );
    } else if (this.$store.state.menuIsActive === true) {
      console.log("true");
      tl
        .staggerTo(
          nl,
          this.$store.state.animParams.dur3,
          {
            y: "10px",
            autoAlpha: 0,
            ease: this.$store.state.animParams.ease
          },
          this.$store.state.animParams.dur2
        )
        .to(slide, 0.5, {
          y: "-100%",
          ease: this.$store.state.animParams.ease
        });
    }
    this.$store.commit("toggleMenuState");
  }
}

我有一个menu.js中间件，可以在打开时关闭菜单。我更喜欢使用相同的变量，而是重新声明它：

import TweenMax from 'gsap'
export default function ({ store }) {
  if (store.state.menuIsActive === !false) {
    if (process.browser) {
      var tl = new TimelineMax()

      var slide = document.querySelector('#slide-menu')
      var nl = document.querySelectorAll('.nav-link')

      if (store.state.menuIsActive === true) {
        console.log('initmenu')
        tl
          .staggerTo(
            nl,
            store.state.animParams.dur3,
            { y: '10px', autoAlpha: 0, ease: store.state.animParams.ease },
            store.state.animParams.dur2
          )
          .to(slide, 0.5, { y: '-100%', ease: store.state.animParams.ease })
        store.commit('setMenuState', false)
      }
    }
  }
}

我复制了页面转换，因为我无法在nuxt.config.js中正常工作。我希望将所有转换保留在那里或在单独的插件文件中，但我不确定最好的方法。

从我的根index.vue页面文件：

import TweenMax from "gsap";
export default {
  transition: {
    name: "page",
    mode: "out-in",
    css: false,

    enter: function(el, done) {
      console.log("animenter contact");
      if (process.browser) {
        var tl = new TimelineMax();
        var tg = document.querySelectorAll(".el");
        var st = document.querySelector(".overlay-grid img");
        var box = document.querySelectorAll(".box");
        tl.fromTo(st, 0.3, { x: -100 }, { x: 0, autoAlpha: 1 });
        tl.staggerTo(tg, 0.3, { autoAlpha: 1 }, 0.1);
        tl.staggerTo(box, 0.3, { autoAlpha: 1, onComplete: done }, 0.1);
      }
    },
    leave: function(el, done) {
      console.log("leaving contact...");
      if (process.browser) {
        var tl = new TimelineMax();
        var tg = document.querySelectorAll(".el");
        var st = document.querySelector(".overlay-grid img");
        var pl = document.querySelector("body");
        var box = document.querySelectorAll(".box");
        tl.fromTo(st, 0.3, { x: 0 }, { x: -100, autoAlpha: 0 });

        tl.staggerTo(tg, 0.3, { autoAlpha: 0 }, 0.1);

        tl.staggerTo(box, 0.3, { autoAlpha: 0, onComplete: done }, 0.1);
      }
    }
  }

最后，在nuxt.config.js中：

  router: {
    middleware: 'menu'
  },
build: {

    vendor: [
      'gsap',
....
    ] /*
  }

我还在商店中设置了一些变量以管理状态，以及一些转换持续时间，因此我不必在很多地方编辑它们以查看某些内容的外观。预览想法或小改动正在变成很多工作，我无法找到解决这个问题的深入文章。

对Nuxt，Vue，GSAP，Webpack和Javascript的提示和技巧的任何帮助都将非常感激。

如何在Nuxt.js中更好地管理使用GSAP动画？

0 个答案: