Smoothstate.js - removeClass 无法使用就绪函数

Question

我正在使用 Smoothstate.js 向我的网站添加页面转换，并且我正在尝试使用 onStart、onProgress 和 onReady 函数在每个页面转换之间显示加载页面。

我的代码有效，但它时不时地卡在加载页面上，容器 div 没有删除 class 'is-loading'。但是，即使它们使用相同的 removeClass 行，它也会删除正在退出的 class?

我很困惑为什么它没有删除。有人可以帮忙吗？

// Photoswipe
$(function(){
  'use strict';
  var options = {
    prefetch: true,
    debug:true,
    cacheLength: 0,
    repeatDelay: 500,


    onStart: {
      duration: 0, // Duration of our animation
      render: function ($container) {
        // Add your CSS animation reversing class
        $container.addClass('is-exiting');

        // Restart your animation
        smoothState.restartCSSAnimations();
      }
    },

    onProgress: {
    // How long this animation takes
    duration: 0,
    // A function that dictates the animations that take place
    render: function ($container) {
            setTimeout(function() { 
                    $container.addClass('is-loading');

                    $('#progressBar').append('<div id="bar"></div>');   
                    var progress = '100%';

                    $('#bar').animate({
                        width: progress
                    }, 400);
    }, 500);
    }
    },

    onReady: {
      duration: 0,
      render: function ($container, $newContent) {
        $container.removeClass('is-loading is-exiting');
        // Inject the new content
        $container.html($newContent);
      },
    },

    onAfter: function() {
            navbarAnimate();
            closeMenu();
            ImageSliders();
            initPhotoSwipeFromDOM('.gallery');
            ImageOverlay(); 
    }
  },


  smoothState = $('#main').smoothState(options).data('smoothState');
});

Answer 1

提示：

您在加载过程开始后 500 毫秒添加正在加载。那么 onReady 是否有可能在 500 毫秒超时之前被触发？因此，在您的 removeClass 调用之后，is-loading 将再次添加为 class?

tl;dr：问题很可能是这里的超时

setTimeout(function() { 
  $container.addClass('is-loading');

  $('#progressBar').append('<div id="bar"></div>');   
  var progress = '100%';

  $('#bar').animate({
    width: progress
  }, 400);
}, 500);

Smoothstate.js - removeClass 无法使用就绪函数

Smoothstate.js - removeClass not working onReady function

javascript

jquery

photoswipe