github
github
jQuery SCSS
2018.09.18

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();
    });
 
  }
});
//$('#barba-wrapper').removeClass('fadeIn').addClass('fadeOut'); //$('#barba-wrapper').removeClass('fadeOut').addClass('fadeIn'); こちらを追加 scssでアニメーションを作成
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%;}
}

カテゴリー

最新記事

人気記事