Question

我有两个下一个和上一个按钮，可在单击时正确调用相关功能。但是，我需要给父级一个transitionend侦听器，该侦听器根据单击的按钮触发不同的功能。

我的代码是：

      this.next = this.story.nextSibling.nextSibling;
      this.prev = this.story.nextSibling;
      this.next.addEventListener('click', evt => this.nextButton(evt));
      this.prev.addEventListener('click', evt => this.prevButton(evt));
      this.story.addEventListener('transitionend', evt => this.moveBack(evt));

当按下下一个按钮时，此功能可以正常工作（因为“ moveBack”功能会触发幻灯片移动）。我不知道如何为上一个按钮触发此操作，而是触发功能“ moveForward”

谢谢

Answer 1

最简单的方法是将当前动画方向存储在变量中：

  this.next = this.story.nextSibling.nextSibling;
  this.prev = this.story.nextSibling;
  this.next.addEventListener('click', evt => { this.dir = 'next'; this.nextButton(evt); });
  this.prev.addEventListener('click', evt => { this.dir = 'prev'; this.prevButton(evt); });
  this.story.addEventListener('transitionend', evt => {
    if(this.dir === 'next') {
       this.moveBack(evt);
    } else {
       this.moveForward(evt);
    }
  );

根据所单击的元素触发不同的功能

1 个答案: