barba.js ページ遷移のアニメーション
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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(); }); } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
//アニメーション用 $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%;} } |