0

我的问题

将 Barba js 动画库合并到我的 Django 项目中后，它开始崩溃。当我点击导航链接时，我当前的登录名将被随机注销。该导航链接正在触发动画。

我的脚本.js

function pageTransition() {
    var tl = gsap.timeline();
    tl.to('#main-wrapper', { duration: 0.1, opacity: 1, transformOrigin: "bottom"})
}

function contentAnimation() {
    var tl = gsap.timeline();
    tl.from('#content-wrapper', {duration: 0.8, translateY: 50, opacity: 0})
    tl.from('#header-wrapper', {duration: 0.8, translateY: 50, opacity: 0}, "-=0.6")
    tl.from('#instructions-wrapper', {duration: 0.8, translateY: 50, opacity: 0}, "-=0.6")
    tl.from('#messages-wrapper', {duration: 0.8, translateY: 50, opacity: 0}, "-=0.6")
}

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

barba.init({
    sync: false,
    transitions: [{
        leave(data) {
            const done = this.async();
            pageTransition();
            delay(100);
            done();
        },

        enter(data) {
            contentAnimation();
        },

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


})

我的 base.html

导航已编辑，但如果您想查看完整的导航，请告诉我。

<body data-barba="wrapper">
  <main data-barba="container" role="main" id="main-wrapper" class="container content-wrapper">
    <nav>
      <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" data-menu="logout" href="{% url 'logout' %}">
              Logout
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" data-menu="settings" href="{% url 'settings' request.user.userprofile.id %}">
              Settings
            </a>
          </li>
      </ul>
    </nav>
    <div id="header-wrapper" class="header d-flex justify-content-center align-items-center">
      <h1>
      {% block header %}

      {% endblock %}
      </h1>
    </div>

    <!-- Instructions -->
    <div id="instructions-wrapper">
    {% block instructions %}

    {% endblock %}
    </div>

    <!-- Messages -->
    <div id="messages-wrapper">
      {% for message in messages %}
      <div class="alert alert-{{message.level_tag }} mt-3 mb-3">
        <a class="close mx-auto my-auto" href="#" data-dismiss="alert">×</a>
        {{ message }}
      </div>
      {% endfor %}
    </div>
    
    <!-- Content -->
    <div id="content-wrapper">
    {% block content %}
    {% if user.is_authenticated %}

    {% else %}
    
    {% include "relogin.html" %}
    
    {% endif %}
    {% endblock %}
    </div>
  </main>

</body>

当我慢慢点击时，一切正常；链接正在加载，动画正在触发页面正在转换到下一个 href，并且地址栏准确地反映了 href。

但是，当我快速单击时，我突然退出了。

一个例子

当我登录后在主页时，地址栏是：

http://127.0.0.1:8000

当我开始快速连续随机单击链接时，它可以是任何页面，但地址栏的一个示例是：

http://127.0.0.1:8000/accounts/login/?next=/user/settings/2

更新

终于设法在 Web 开发工具控制台中看到了一个错误。Web 开发工具指向“o.send()”，表示加载资源失败，错误代码为 404

巴巴核心

function I(t, n, r) {
        return void 0 === n && (n = 2e3),
        new Promise((function(e, i) {
            var o = new XMLHttpRequest;
            o.onreadystatechange = function() {
                if (o.readyState === XMLHttpRequest.DONE)
                    if (200 === o.status)
                        e(o.responseText);
                    else if (o.status) {
                        var n = {
                            status: o.status,
                            statusText: o.statusText
                        };
                        r(t, n),
                        i(n)
                    }
            }
            ,
            o.ontimeout = function() {
                var e = new Error("Timeout error [" + n + "]");
                r(t, e),
                i(e)
            }
            ,
            o.onerror = function() {
                var n = new Error("Fetch error");
                r(t, n),
                i(n)
            }
            ,
            o.open("GET", t),
            o.timeout = n,
            o.setRequestHeader("Accept", "text/html,application/xhtml+xml,application/xml"),
            o.setRequestHeader("x-barba", "yes"),
            o.send()
        }
        ))
    }

安慰

GET http://127.0.0.1:8000/accounts/login/?next=/user/settings/2 404 (Not Found)
(anonymous) @ core:formatted:682
I @ core:formatted:650
e.B @ core:formatted:1648
4

0 回答 0