1

我正在barba JS我的React网站上实施，但似乎无法让文件在页面上工作。作为参考，我的文件夹结构如下：

theme
  pages
    Homepage.js
    Contact.js
  utils
    anim.js
    helpers.js
  index.js

在我的index.js文件上，我正在尝试使用import我的anim.js脚本，以便将文件应用于我的所有pages. 但是，在编译时，我得到一个'delay' is not defined no-undef错误anim.js，即使delay已定义（因为我正在导入gsap）。

Homepage.js（Contact.js类似，唯一不同的是data-barba-namespace）

import React from "react";
import LoadingScreen from "../components/LoadingScreen/LoadingScreen";
import Hero from "../components/Hero/Hero";

class Homepage extends React.Component {
  render(){
    return (
      <>
        <LoadingScreen />
        <div data-barba="container" data-barba-namespace="home">
          <Hero />
        </div>
      </>
    )
  }
}

export default Homepage;

动画.js

import { pageTransition, contentAnimation } from "./helpers";
import barba from '@barba/core';
import gsap from "gsap";

barba.init({
  sync: true,
  transitions: [{
    async leave(data){
      const done = this.async();
      pageTransition();
      await delay(1000);
      done();
    }, async enter(data){
      contentAnimation();
    }, async leave(data){
      contentAnimation();
    }}
  ]
});

helpers.js

export function pageTransition(){
  var timeline = gsap.timeline();
  timeline.to("loadingScreen",{
    duration: 1.2,
    width: "100%",
    left: "0",
    ease: "Expo.easeInOut"
  });
  timeline.to("loadingScreen",{
    duration: 1,
    width: "100%",
    left: "100%",
    ease: "Expo.easeInOut",
    delay: 0.3
  });
  timeline.set(".LoadingScreen", { left: "-100%" } );
}

export function contentAnimation(){
  var timeline = gsap.timeline();
  timeline.from("animate-this", {
    duration: 1,
    y: 30,
    opacity: 0,
    stagger: 0.4,
    delay: 0.2
  });
}

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import { pageTransition, contentAnimation } from "./utils/helpers";
import { barba } from '../node_modules/@barba/core';

import anim from "./utils/anim";
import "./scss/style.scss";

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

index.html（显示barba包装器）

<body data-barba="wrapper">
  <main id="root"></main>
</body>
4

2 回答 2

0

您实际上可以将以下代码放入 useEffect 中，以在 index.js 或您希望的任何文件中创建和加载脚本

useEffect(() => {

const script = document.createElement("script");
script.src = "localfilepath";
script.async = true;
script.defer = true;
document.body.append(script);

 }, []);
于 2021-10-10T17:45:48.210 回答
0

您的导入顺序看起来错误。所有 node_modules 应该在本地文件之前首先导入App.js

import React from "react";
import ReactDOM from "react-dom";
import { barba } from '../node_modules/@barba/core';


import { pageTransition, contentAnimation } from "./utils/helpers";
import anim from "./utils/anim";

import App from "./App";
import "./scss/style.scss";

或者您可以延迟导入模块并在加载成功时启动应用程序。

(async () => {
  // Dynamically imported module (runtime)
  await import('../node_modules/@barba/core');
  const root = document.getElementById("root");
  ReactDOM.render(<App />, root);
})();

阅读更多： https ://www.aleksandrhovhannisyan.com/blog/react-lazy-dynamic-imports/

于 2021-10-16T16:51:10.150 回答