为什么我的 barbajs 转换在与 parcel 捆绑在一起时停止工作？

Question

So I have this basic website template I used from a video on Barba.js to diagnose wether this issue was due to parcel or barba.所以我有这个基本的网站模板，我从 Barba.js 上的视频中使用它来诊断这个问题是由于包裹还是 barba。 When I ran the code without bundling with parcel, the transitions worked fine aswell as the links.当我在不与包裹捆绑在一起的情况下运行代码时，转换和链接都运行良好。 However when I bundled with parcel and ran npm run dev, my href links stopped working and so did the transitions, while the console showed 0 errors.但是，当我与 parcel 捆绑并运行 npm run dev 时，我的 href 链接停止工作，转换也停止工作，而控制台显示 0 个错误。 Here are the 4 files of code.这是4个代码文件。

about.html关于.html

            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="utf-8" />
                <title>Page Transition Using BarbaJS & GSAP</title>
                <link rel="stylesheet" href="main.css" />
            </head>

            <body data-barba="wrapper">
            <div class="load-container">
                <div class="loading-screen"></div>
            </div>

            <main data-barba="container" data-barba-namespace="about-section">
                <div class="header">
                    <h1 class="title animate-this">
                        about page
                    </h1>
                    <div class="animate-this button">
                        <a href="index.html">go back to home</a>
                    </div>
                </div>
            </main>
            </body>
            <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
            <script src="https://unpkg.com/@barba/core"></script>
            <script
                    type="text/javascript"
                    src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"
            ></script>
            <script src="main.js"></script>
            </html>

index.html index.html

            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="utf-8" />
                <title>Page Transition Using BarbaJS & GSAP</title>
                <link rel="stylesheet" href="main.css" />
            </head>

            <body data-barba="wrapper">
            <div class="load-container">
                <div class="loading-screen"></div>
            </div>

            <main data-barba="container" data-barba-namespace="home-section">
                <div class="header">
                    <h1 class="title animate-this">
                        home page
                    </h1>
                    <div class="animate-this button">
                        <a href="about.html">go to about</a>
                    </div>
                </div>
            </main>
            </body>

            <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
            <script src="https://unpkg.com/@barba/core"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
            <script src="main.js"></script>
            </html>

main.css主要.css

            html,
            body {
                margin: 0;
                padding: 0;
                background: #161616;
                color: white;
            }

            .loading-screen {
                position: relative;
                padding-left: 0;
                padding-right: 0;
                padding-top: 0;
                background-color: #4bedc2;
                width: 0%;
                height: 100%;
            }

            .load-container {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                overflow: hidden;
                z-index: 10;
                pointer-events: none;
            }

            h1 {
                position: absolute;
                top: 38%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-family: "Cosi Azure";
                font-size: 84px;
            }

            .button {
                position: absolute;
                top: 60%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .button a {
                font-family: Arial, Helvetica, sans-serif;
                text-decoration: none;
                color: white;
                border: 1px solid white;
                padding: 24px 40px;
                text-transform: uppercase;
                letter-spacing: 4px;
                font-size: 10px;
                transition: 0.3s;
            }

            .button:hover a {
                background: white;
                color: #161616;
                transition: 0.3s;
            }

main.js主程序

            function delay(n) {
                n = n || 2000;
                return new Promise((done) => {
                    setTimeout(() => {
                        done();
                    }, n);
                });
            }

            function pageTransition() {
                var tl = gsap.timeline();
                tl.to(".loading-screen", {
                    duration: 1.2,
                    width: "100%",
                    left: "0%",
                    ease: "Expo.easeInOut",
                });

                tl.to(".loading-screen", {
                    duration: 1,
                    width: "100%",
                    left: "100%",
                    ease: "Expo.easeInOut",
                    delay: 0.3,
                });
                tl.set(".loading-screen", {left: "-100%"});
            }

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


            barba.init({
                sync: true,

                transitions: [
                    {
                        async leave(data) {
                            const done = this.async();

                            pageTransition();
                            await delay(1000);
                            done();
                        },

                        async enter(data) {
                            contentAnimation();
                        },

                        async once(data) {
                            contentAnimation();
                        },
                    },
                ],
            });

Answer 1

Removing the async attributes in front of the hooks made it work.删除钩子前面的异步属性使其工作。

为什么我的 barbajs 转换在与 parcel 捆绑在一起时停止工作？

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-06-22 01:25:55

为什么我的 barbajs 转换在与 parcel 捆绑在一起时停止工作？

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-06-22 01:25:55

解决方案1
1 已采纳 2020-06-22 01:25:55