当调用过渡时，未调用JavaScript方法

我制作了此动画，当您单击卡时，它将输入全屏。当我在卡上调用过渡端时，它不会像我期望的那样进入方法。当我这样做时，但是我只是做一个函数而起作用。

这是JavaScript：

class expandCollapse {
constructor() {
    this.cards = document.querySelectorAll('.card');
    this.expandCard = this.expandCard.bind('this');
    this.onTransitionEnd = this.onTransitionEnd.bind('this');
    for (var i = 0; i < this.cards.length; i++) {
        this.cards[i].addEventListener('click', this.expandCard(i, this.cards));
    }
}
expandCard(i, cards) {
    var card = cards[i];
    return function() {
        //FLIP animation
        //first
        const first = card.getBoundingClientRect();
        card.classList.add('expanded');
        //last
        const last = card.getBoundingClientRect();
        //invert
        var invertX = first.left - last.left;
        var invertY = first.top - last.top;
        var invertSx = first.width / last.width;
        var invertSy = first.height / last.height;
        card.style.transformOrigin = '0 0';
        card.style.transform = 'translate(' + invertX + 'px, ' + invertY + 'px) scale(' + invertSx + ', ' + invertSy + ')';
        requestAnimationFrame(function() {
            requestAnimationFrame(function() {
                //play
                card.classList.add('animatable');
                card.style.transform = '';
            });
        });

        //This doesn't work
        card.addEventListener('transitionend', this.onTransitionEnd);
        //this does
        card.addEventListener('transitionend', function(evt) {
            console.log('this is not the method');
        });
    }
}
//This method doesn't get called
onTransitionEnd(evt) {
    return function() { console.log('the method works'); }
    }
}
new expandCollapse()

html

<html>
<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="expand-collapse.js" defer></script>
</head>
<body>
    <div class="content">
        <button class="card"></button>
        <button class="card"></button>
        <button class="card"></button>
    </div>
</body>
</html>

和CSS：

html,
body {
    margin: 0;
    padding: 0;
}
.content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
 }
.card {
    margin: 3px;
    border: none;
    background-color: tomato;
    color: green;
    width: 90%;
    max-width: 600px;
    height: 100px;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
 }
.animatable {
    transition: transform 1s cubic-bezier(0, 0, 0.3, 1);
}
.expanded {
    position: fixed;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    z-index: 10;
}

您将功能绑定到 'this'而不是 this，即与字符串，而不是类范围！
当您从expandCard返回function时，它不绑定到类的上下文。

演示|固定代码：

class expandCollapse {
  constructor() {
      this.cards = document.querySelectorAll('.card');
      this.expandCard = this.expandCard.bind(this); // no quotes!
      this.onTransitionEnd = this.onTransitionEnd.bind(this); // no quotes!
      for (var i = 0; i < this.cards.length; i++) {
          this.cards[i].addEventListener('click', this.expandCard(i, this.cards));
      }
  }
  expandCard(i, cards) {
      var card = cards[i];
      return function() {
          /* FLIP animation ... */

          //This does work now
          card.addEventListener('transitionend', this.onTransitionEnd);

      }.bind( this ); // bind the returned function to this
  }
  onTransitionEnd(evt) {
    console.log('the method works'); 
  }
}

相关内容

最新更新

热门标签：