我正在使用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');
});
答案 0 :(得分:1)
只是一个提示:
在加载过程开始后500ms加载is-loading。那么在你的500ms超时之前,onReady可能会被解雇吗?因此,在您的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);