我正在使用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')
    }
...

这样,过渡就变得顺畅而顺畅。

关于javascript - 完全加载了Turbolinks后显示页面,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28998570/

10-09 15:16
查看更多