Question

我制作了这个动画，当你点击一张卡片时，它会全屏显示。当我在卡上调用转换结束时，它不会像我期望的那样进入方法。当我做同样的事情而不是方法，我只是做一个功能，它的工作原理。

这是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;
}

Answer 1

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

demo |固定代码：

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'); 
  }

}

调用transitionend时未调用javascript方法

1 个答案: