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

Stack Overflow用户

提问于 2021-10-11 19:36:59

回答 1查看 39关注 0票数 0

我正在使用我在网上找到的一个脚本，它使用GSAP (Greensock)控制页面过渡。

我不是专家，但我遵循了一些教程，soI有点理解GSAP的部分。

我的问题是这个脚本切换了2个页面过渡-点击按钮1，页面2动画进入视图。现在点击按钮2，第一页返回。

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

我使用的脚本是：

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>

希望有人能告诉我如何重写/扩展这个脚本。

谢谢。

javascript

addeventlistener

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-10-11 20:37:17

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?
}