barba.js ページ遷移のアニメーション

var FadeTransition = Barba.BaseTransition.extend({
  start: function() {

    Promise
      .all([this.newContainerLoading, this.fadeOut()])
      .then(this.fadeIn.bind(this));
  },

  fadeOut: function() {
        $('#barba-wrapper').removeClass('fadeIn').addClass('fadeOut');
    return $(this.oldContainer).animate({ opacity: 0 }).promise();
  },

  fadeIn: function() {
         $('#barba-wrapper').removeClass('fadeOut').addClass('fadeIn');
    var _this = this;
    var $el = $(this.newContainer);

    $(this.oldContainer).hide();

    $el.css({
      visibility : 'visible',
      opacity : 0,

    });

    $el.animate({
            opacity: 1,
        }, 800, function() {
      _this.done();
    });

  }
});

//$(‘#barba-wrapper’).removeClass(‘fadeIn’).addClass(‘fadeOut’);
//$(‘#barba-wrapper’).removeClass(‘fadeOut’).addClass(‘fadeIn’);

こちらを追加

scssでアニメーションを作成

//アニメーション用
$time : .5s;
$ease : cubic-bezier(0.25, 0.46, 0.45, 0.94);

#barba-wrapper{
    position: relative;

    &.fadeIn{
        animation: fadeIn $time $ease;
    }
    &.fadeOut{
        animation: fadeOut $time $ease;
    }
    &.fadeOutDelay{
        animation: fadeOut $time .4s $ease;
    }
}

@keyframes fadeIn{
    0%{left: 100%;}
    100%{left: 0;}
}
@keyframes fadeOut{
    0%{left: 0;}
    100%{left: -100%;}
}