如何使用Barba.js制作特定的动画?

时间:2019-07-11 12:16:38

标签: javascript barbajs

我正在处理 Barba.js ,我正在尝试制作两个不同的动画:

  1. 第一个是我的about部分的特定动画(我只添加了类about)。
  2. 第二个是我所有部分的相同动画,其中包括about部分。

下面的代码是我自己编写的。但是我发现这段代码是如此多余和混乱,因为我重复了太多代码。我确信有某种方法可以使我的代码变得更好。

    barba.init({
      transitions: [{
      /////// SPECIFIC ANIMATION
      name: 'about',
        leave: function (data) {
            var done = this.async();
            $('body').addClass('about');


            TweenMax.to(data.current.container, .4, {
                opacity: 0,
                onComplete: done
            });


            TweenLite.delayedCall(0.6, myFunction);

            function myFunction() {
                 TweenMax.staggerFromTo(".title", 1, {
                        opacity: 0.6,
                           y: -20
                    }, {
                        opacity: 0.2,
                      y: 0
                    }, 0.2);
            }
        },
        enter: function (data) {
            var done = this.async();
            TweenMax.from(data.next.container, .4, {
                opacity: 0,
                onComplete: done
            });
        },

    from: {

      // define rule based on multiple route names
      namespace: [
        'home',
        'works'
      ]
    },
    to: {

      // define rule based on multiple namespaces
      namespace: [
        'about'
      ]
    }

    }, {
     name: 'pages',
        leave: function (data) {
            var done = this.async();
            $('body').removeClass('about');


            TweenMax.to(data.current.container, .4, {
                opacity: 0,
                onComplete: done
            });


            TweenLite.delayedCall(0.6, myFunction);

            function myFunction() {
                 TweenMax.staggerFromTo(".title", 1, {
                        opacity: 0.6,
                           y: -20
                    }, {
                        opacity: 0.2,
                      y: 0
                    }, 0.2);
            }
        },
        enter: function (data) {
            var done = this.async();
            $('body').removeClass('about');
            TweenMax.from(data.next.container, .4, {
                opacity: 0,
                onComplete: done
            });
        },
       }]
       });

有帮助吗?谢谢!!

0 个答案:

没有答案