Question

进行运动模糊。单击下一个按钮时，它将淡出运动模糊效果。使用prev按钮执行相同操作。感谢其他人的帮助。

＆＃13;

var FadeTransition = Barba.BaseTransition.extend({
  start: function() {
    Promise
      .all([this.newContainerLoading, this.prev()])
      .then(this.next.bind(this));
  },

  prev: function() {
    var el1 = jQuery(this.oldContainer);

    el1.css({
      "animation": "blur 500ms",
      "-webkit-filter": "blur(0px,5px,0px)",
    });

    return jQuery(this.oldContainer).animate({
      left: 50
    }, 1000, 'easeOutElastic').promise();
  },

  next: function() {
    var _this = this;
    var el = jQuery(this.newContainer);

    jQuery(this.oldContainer).hide();
    el.css({
      visibility: 'visible',
      opacity: 0
    });

    el.animate({
      opacity: 1
    }, 400, function() {
      _this.done();
    });
  }

});

Barba.Pjax.getTransition = function() {
  return FadeTransition;
};

Barba.Pjax.start();

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.js"></script>

＆＃13;

进行运动模糊。单击下一个按钮时，它将淡出运动模糊效果。使用prev按钮执行相同操作。感谢其他帮助

如何使用Barba.js进行运动模糊

0 个答案: