jQuery: устранение белого "паузы" между анимациями

Question

Я только что открыл Barba.js и считаю его очень полезным. Он обеспечивает плавные переходы между URL одного и того же сайта.

Я собрал Plunker, состоящий из двух страниц (index.html и about.html), которые загружаются плавно, с помощью jQuery's. fadeIn() а также fadeOut() методы.

$(document).ready(function() {
  var transEffect = Barba.BaseTransition.extend({
    start: function() {
      this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
    },
    fadeInNewcontent: function(nc) {
      nc.hide();
      var _this = this;
      $(this.oldContainer).fadeOut(1000).promise().done(() => {
        nc.css('visibility', 'visible');
        nc.fadeIn(1000, function() {
          _this.done();
        });
        $('html, body').animate({
          scrollTop: 300
        },1000);
      });
    }
  });
  Barba.Pjax.getTransition = function() {
    return transEffect;
  }
  Barba.Pjax.start();
});

Проблема с этой анимацией заключается в том, что между ними есть интервал белого экрана.

Как я могу устранить этот интервал, чтобы сделать переход более плавным? Под "более гладким" я подразумеваю похожий на этот (нажмите "просмотреть случай").

Answer 1

Белый экран - это цвет корпуса, потому что вы используете promise().done(..)jquery применить fadeIn после fadeOut закончить, чтобы появился цвет кузова. Итак, это пример, похожий на то, что у вас есть:

<style type="text/css">
    .One{
        width: 100%;
        height: 100%;
        position: absolute;
        margin: 0px;
        padding: 0px;
        top: 0px;
        left: 0px;
        background-color: #476d80;
        cursor: pointer;
        z-index: 1;
    }
    .Two{
        width: 100%;
        height: 100%;
        position: absolute;
        margin: 0px;
        padding: 0px;
        top: 0px;
        left: 0px;
        background-color: #03A9F4;
        cursor: pointer;
        display: none;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('div.one').click(function(){
            $(this).fadeOut(1000).promise().done(function(){
                $('div.Two').fadeIn(1000);
            });
        });
    });
</script>
<div class="One"></div>
<div class="Two"></div>

как вы видите в примере выше, белый экран также появляется, так что если вы не хотите, просто не используйте promise().done(..),

$(document).ready(function(){
    $('div.one').click(function(){
        $(this).fadeOut(1000);
        $('div.Two').fadeIn(1000);
    });
});

Вы можете редактировать свой код следующим образом:

$(this.oldContainer).fadeOut(1000).promise().done(() => {
    $('html, body').animate({
        scrollTop: 300
    },1000);
});
nc.css('visibility', 'visible');
nc.fadeIn(1000, function() {
    _this.done();
});

Answer 2

Как насчет использования setTimeout() перекрывать исчезновение и исчезать? Это должно помешать ему полностью исчезнуть, чего и нужно избегать.

Вы можете попробовать что-то вроде следующего:

$(document).ready(function() {
  var transEffect = Barba.BaseTransition.extend({
    start: function() {
      this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
    },
    fadeInNewcontent: function(nc) {
      nc.hide();
      var _this = this;

      // manipulate these values
      let fadeOutTime = 1000;
      let fadeInTime = 1000;
      let overlapTime = 100;

      $(this.oldContainer).fadeOut(fadeOutTime);

      // use setTimeout() to begin fadeIn before fadeOut is completely done
      setTimeout(function () {
        nc.css('visibility', 'visible');
        nc.fadeIn(fadeInTime, function() {
          _this.done();
        });

        $('html, body').animate({
          scrollTop: 300
        }, fadeInTime);

      }, fadeOutTime - overlapTime)

    }
  });
  Barba.Pjax.getTransition = function() {
    return transEffect;
  }
  Barba.Pjax.start();
});

ПРИМЕЧАНИЕ: это всего лишь удар, плунжер полезен, но трудно увидеть анимацию в действии.

ОБНОВИТЬ

Я думаю, что вам понадобится что-то похожее на вышеприведенное, но если вы хотите добавить или исчезнуть в черном цвете, тогда вы также захотите сделать что-то вроде создания div-оболочки вокруг всего вашего контента в вашем теле и дать этому div цвет фона вашего приложения, #eff3f6, а затем черный фон. У вас будет некоторая работа, чтобы получить желаемый эффект, но что-то подобное или ссылка SO в комментариях ниже должны помочь.

Answer 3

Я вышел с этой версией скрипта:

$(function(){
    var transEffect = Barba.BaseTransition.extend({
    start: function() {
      this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
    },
    fadeInNewcontent: function(nc) {
      var _this = this;
      nc.css('visibility', 'visible');
      nc.show().promise().done(() => {
        $(this.oldContainer).fadeOut(50);
        if (!isMobile.any()) {
          $('html, body').delay(100).animate({
            scrollTop: 200
          },700);
        }
      });
    }
  });
  Barba.Pjax.getTransition = function() {
    return transEffect;
  }
  Barba.Pjax.start();
});

Это лучше, но не достаточно гладко. Посмотрите на эффект в реальной жизни проекта. Как я могу улучшить это?