Как определить функцию initDrag (), которая будет содержать код, запускающий мой перетаскиваемый плагин? - PullRequest
Новая
       60

Как определить функцию initDrag (), которая будет содержать код, запускающий мой перетаскиваемый плагин?

0 голосов
/ 27 мая 2020

Я новичок в Javascript, и мне понадобится помощь. Мне нужно было бы обернуть весь мой перетаскиваемый код в функцию, а затем выполнить эту функцию, когда переход Barba будет завершен.

ШАГ 1: в моем основном. js мне нужно будет определить функцию initDrag ( ), который будет содержать код, запускающий мой перетаскиваемый плагин

ШАГ 2: в моем main. js, инициализируйте barba, затем поместите вызов initDrag () в соответствующее представление, чтобы Барба запустил мой плагин перетаскивания каждый раз, когда вы входите в это представление

Здесь мой main. js

//BARBA JS

function delay(n) {
  n = n || 2000;
  return new Promise((done) => {
    setTimeout(() => {
      done();
    }, n);
  });
}

function pageTransition() {
  var tl = gsap.timeline();

tl.to(".animate-this", {
     duration: .2,  opacity: 0, delay: 0,  y: 30,  //scale:0, delay: 0.2, 
  });
  tl.to(".animate-this", {
     duration: 0,  opacity: 0, delay: 0,  scale:0,  //scale:0, delay: 0.2, 
  });

  tl.fromTo(".loading-screen", {width: 0, left: 0}, {
    duration: 1,
    width: "100%",
    left: "0%",
    ease: "expo.inOut",
    delay: 0.3,
    onComplete: function() {
      window.scrollTo(0, 0);
    }
  });

  tl.to("#svg-1", {
    duration: 1,  opacity: 0,  y: 30, stagger: 0.4, delay: 0.2, 
  });

  tl.to(".loading-screen", {
    duration: 1,
    width: "100%",
    left: "100%",
    ease: "expo.inOut",
    delay: 0, //CHANGE TIME HERE END TRANS
  });




  tl.set(".loading-screen", { left: "-100%", });
  tl.set("#svg-1", { opacity: 1,  y: 0 });
}



function contentAnimation() {
  var tl = gsap.timeline();
  tl.from(".animate-this",  { duration: .5, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 });
}

$(function () {
  barba.init({
    sync: true,

    transitions: [
      {


        async leave(data) {
          const done = this.async();

          pageTransition();
          await delay(2500);
          done();
        },

        async enter(data) {
          contentAnimation();
        },

        async once(data) {
          contentAnimation();
        },

      },
    ],
  });
});

, а здесь мой перетаскиваемый код, который мне понадобится для определения функции initDrag () 

//DRAGGABLE IMAGES JS I would need to wrap all my draggable code into a function then you can execute that function when Barba transition is complete.

var winWidth = window.innerWidth,
    winHeight = window.innerHeight,
    threeWinHeight = winHeight*3;

$(window).on('resize', function(){
  winHeight = window.innerHeight,
  twiceWinHeight = winHeight*2;
});


$('.shape').each(function(){
  var topPos = Math.floor(Math.random()*1800),

      //BE CAREFUL 7000px is less then total body height or  CAUSING OVERFLOW
      leftPos = Math.floor(Math.random() * winWidth);
  $(this).css('top', topPos + 'px');
  $(this).css('left', leftPos + 'px');
});




Draggable.create('.shape', {
  //type:"rotation",
  bounds: '.section-2',
  edgeResistance:0.65,
  throwProps:true,
});



var number = Math.floor((Math.random() *15) + 2);
var number2 = Math.floor((Math.random() * 0) + -15);
var number3 = Math.floor((Math.random() * 0) + 15);
var number4 = Math.floor((Math.random() * 0) + 6);
$(".shape--circle").css("transform", "rotate(" + number2 + "deg)");
$(".shape--square").css("transform", "rotate(" + number3 + "deg)");
$(".shape--circle-2").css("transform", "rotate(" + number4 + "deg)");
...