我正在使用 Smoothstate.js 向我的网站添加页面转换,并尝试使用 onStart、onProgress 和 onReady 函数在每个页面转换之间显示一个加载页面。
我的代码有效,但它时不时地卡在加载页面上并且容器 div 没有删除类“is-loading”。但是,它正在删除正在退出的类,即使它们使用相同的 removeClass
行?
我很困惑为什么它没有删除。有人可以帮忙吗?
// 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');
});
最佳答案
只是一个提示:
您在加载过程开始后 500 毫秒添加 is-loading。那么 onReady 是否有可能在 500 毫秒超时之前被触发?因此,在您的 removeClass 调用之后,is-loading 将再次作为类添加吗?
tl;dr:问题很可能是这里的超时
setTimeout(function() {
$container.addClass('is-loading');
$('#progressBar').append('<div id="bar"></div>');
var progress = '100%';
$('#bar').animate({
width: progress
}, 400);
}, 500);
关于javascript - Smoothstate.js - removeClass 不工作就绪功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48663729/