Question

我正在尝试使用javascript钩子（beforeEnter，enter，leave）与Nuxt js和Gsap进行页面转换，entry效果很好，但是请假钩出了点问题，因为未显示动画。

我有2页（索引和关于）

Index.vue

<template>
   <div class="design">
     <h1>Home Page</h1>
        <nuxt-link class="link" to="/              about">Go to about page</nuxt-link>
       <div id="box" class="box"></div>
       <div class="overlay"></div>
   </div>
 </template>

 <script>
     import { TweenLite } from "gsap";
     export default {
         transition: {
            mode: "out-in",
            css: false,
            beforeEnter: function(el) {
              el.style.opacity = 0;
            },
            enter: function(el, done) {
            console.log("Enter to Index");
           TweenLite.to(el, 3, {
           opacity: 1,
          onComplete: done
       });
          done();
      },
   leave(el, done) {
        console.log("Leave from Index");
       const overlay = document.querySelector(".overlay");
    TweenLite.to(overlay, 1, {
         width: "100%",
         onStart: () =>    console.log("Animation Start"),
    onComplete: done
  });
   }
  }
   };
 </script>

About.vue

<template>
   <div class="design">
      <h1 id="title" class="title">About    Page</h1>
     <nuxt-link exact class="link" to="/">Back to home</nuxt-link>
    <div class="overlay"></div>
     </div>
 </template>

 <script>
    import { TweenLite } from "gsap";
    export default {
    transition: {
      css: false,
      mode: "out-in",
      beforeEnter: function(el) {
     el.style.opacity = 0;
   },
  enter(el, done) {
  console.log("Enter to Design");
  TweenLite.to(el, 3, {
    opacity: 1,
    onComplete: done
  });
  done();
},
leave(el, done) {
  console.log("Leave from Design");
  const overlay = document.querySelector(".overlay");
  TweenLite.to(overlay, 1, {
    width: "100%",
    onStart: () => console.log("Animation Start"),
    onComplete: done
    });
  }
}
 };
</script>

我想念什么吗？，我很确定这应该可行

这是我当前的package.json

{
   "name": "page-transitions",
    "version": "1.0.0",
    "description": "My solid Nuxt.js    project",
    "author": "Me",
    "private": true,
   "scripts": {
       "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
       "build": "nuxt build",
       "start": "cross-env NODE_ENV=production node server/index.js",
      "generate": "nuxt generate"
     },
      "dependencies": {
         "cross-env": "^5.2.0",
         "express": "^4.16.4",
         "gsap": "^2.1.3",
         "nuxt": "^2.5.1"
   },
  "devDependencies": {
   "nodemon": "^1.18.9"
  }  
}

此外，我用相同的代码制作了一个codeandbox，奇怪的是，它起作用了！我不知道这里发生了什么，如果我丢失了一些东西或者是我的配置，这里是指向codesandbox的链接

Gsap Page Transitions Nuxt

我希望有人能解释一下这里发生的事情

NuxtJs- Javascript离开过渡钩子不调用Gsap Tween

0 个答案: