我如何重写此 JavaScript 以包含额外的事件侦听器？

Question

我正在使用我在网上找到的脚本，它使用 GSAP (Greensock) 控制页面转换。

我不是专家，但我已经学习了一些教程，所以我有点了解 GSAP 部分。

我的问题是此脚本会切换 2 个页面转换 - 单击按钮 1 和页面 2 会动画显示。现在单击按钮 2 和第一页 returns。

我正在尝试扩展此脚本以包含额外的页面（带有额外的按钮）。我已经尝试了几次，但到目前为止我一无所获。

我使用的脚本是：

var btns = document.querySelectorAll('.jsBtn');
var duration = .8;
var isAnimating = false;

addEventListenerList(btns, 'click', function (e) {
  if(!isAnimating) {
  switchPages(e.currentTarget.dataset.out, e.currentTarget.dataset.in);
  }
});
function switchPages(outFn, inFn) {
  isAnimating = true;
  window[outFn](document.querySelector('.current'));
  window[inFn](document.querySelector('.jsPage:not(.current)'));
}

function scaleDown(el) {
  addClass(el, 'current');
  TweenLite.fromTo(el, duration, {
    opacity: 1,
    scale: 1
  }, {
    opacity: 0,
    scale: .8,
    clearProps: 'opacity, scale',
    onComplete: function () {
    removeClass(el, ['top', 'current']);
   }
  });
}

function moveFromRight(el) {
  addClass(el, ['top', 'current']);
  TweenLite.fromTo(el, duration, {
  xPercent: 100
}, {
  xPercent: 0,
  clearProps: 'xPercent',
  onComplete: function () {
  removeClass(el, 'top');
  isAnimating = false;
 }
});
}


// utils
function addClass(el, className) {
  [].concat(className).forEach(function (n) {
  el.classList.add(n);
});
}

function removeClass(el, className) {
  [].concat(className).forEach(function (n) {
  el.classList.remove(n);
});
}

function addEventListenerList(list, event, fn) {
  for (var i = 0, len = list.length; i < len; i++) {
  list[i].addEventListener(event, fn, false);
}
}

我使用的HTML如下。我插入了第三页（和第三个按钮）但无法让脚本识别此按钮并触发相关转换：

<div class="page p1 current jsPage">
   <button class="btn1 jsBtn" data-out="scaleDown" data-in="moveFromRight">One</button>
</div>

<div class="page p2 jsPage">
   <button class="btn2 two jsBtn" data-out="scaleDown" data-in="moveFromRight">Two</button>
</div>

<div class="page p3 jsPage">
   <button class="btn3 three jsBtn" data-out="scaleDown" data-in="moveFromRight">Two</button>
</div>

希望有人能告诉我如何 rewrite/extend 这个脚本。

谢谢。

Answer 1

switchPages 功能可能是您要进行更改的地方。

这里有一个例子：

function switchPages(outFn, inFn) {
  isAnimating = true;
  var currentPage = document.querySelector('.current'); // get current page
  var nextPage = currentPage.nextElementSibling; // get next page, assuming identical html structure
  if (!nextPage.classList.contains('jsPage')) nextPage = document.querySelector('.jsPage'); // if next element is not a page, get first page
  window[outFn](currentPage); // does it need to be global?
  window[inFn](nextPage); // does it need to be global?
}

我如何重写此 JavaScript 以包含额外的事件侦听器？

How do I rewrite this JavaScript to include extra event listeners?

javascript

addeventlistener