Как сделать конкретную анимацию с Barba.js? - PullRequest
0 голосов
/ 11 июля 2019

Я имею дело с Barba.js и пытаюсь сделать две разные анимации:

  1. Первым из них будет специальная анимация для моего раздела about (я просто добавлю класс about).
  2. Второй будет одна и та же анимация для всех моих разделов, включая раздел о

Код ниже, это то, что я сделал сам. Но я нахожу этот код таким избыточным и грязным, потому что я повторяю слишком много кода. Я уверен, что есть какой-то способ улучшить мой код.

    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
            });
        },
       }]
       });

Любая помощь? Спасибо !!

...