use*_*213 14 html javascript jquery ruby-on-rails turbolinks
我正在使用Turbolinks,我有一个在页面之间发生的加载动画.我目前正在使用page:load来完成动画,但是看起来好像page:load就像文件就绪而不是window.on加载.
期望的效果是我在页面加载时在页面上显示加载动画时显示的叠加层.一旦页面完全加载(包含图像,对象等),它将淡出叠加层以显示内容.
发生的事情是在页面完全加载之前显示内容.这是我正在使用的JavaScript.
(function () {
function showPreloader() {
Turbolinks.enableProgressBar();
$('#status').fadeIn('slow');
$('#preloader').delay(300).fadeIn('slow');
}
function hidePreloader() {
$('#status').fadeOut();
$('#preloader').delay(300).fadeOut('slow');
}
$(document).on('page:fetch', showPreloader);
$(document).on('page:load', hidePreloader);
$(window).on('load', hidePreloader);
})()
这种解决方法适用于turbolinks 5,但应该很容易适应.
由于turbolinks缓存,它会立即显示加载,它会在进行ajax调用之前呈现页面,从而打破动画.
为了使加载效果起作用,我们必须禁用它:
<head>
....
<meta name="turbolinks-cache-control" content="no-cache">
然后我们可以做类似的事情:(使用animated.css)
$(document).on('turbolinks:click', function(){
$('.page-content')
.addClass('animated fadeOut')
.off('webkitAnimationEnd oanimationend msAnimationEnd animationend')
});
$(document).on('turbolinks:load', function(event){
// if call was fired by turbolinks
if (event.originalEvent.data.timing.visitStart) {
$('.page-content')
.addClass('animated fadeIn')
.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
$('.page-content').removeClass('animated');
});
}else{
$('.page-content').removeClass('hide')
}
...
有了这个,过渡是美好而顺利的.
| 归档时间： |
|
| 查看次数： |
1210 次 |
| 最近记录： |