トランジェントエンドが呼び出されたときにjavascriptメソッドが呼び出されない

このアニメーションを作成しました。カードをクリックすると、フルスクリーンになります。カードのトランジション・エンドを呼び出すと、私が期待するような方法には入りません。私が同じことをするときに、代わりにメソッドの代わりに私はちょうど関数を作成し、それは動作します。ここでトランジェントエンドが呼び出されたときに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; 
}

出典

2016-11-24 Jelmar van aert

あなたは'this'代わりのthisに機能を結合していますつまり、クラススコープではなくStringに変換します。
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'); 
    } 

}

出典

2016-11-24 13:01:55 pawel

トランジェントエンドが呼び出されたときにjavascriptメソッドが呼び出されない

答えて

関連する問題