transitionend가 호출 될 때 javascript 메서드가 호출되지 않습니다.

이 애니메이션을 만들었습니다. 카드를 클릭하면 전체 화면으로 이동합니다. 카드에서 트랜지션 엔드를 호출하면 예상했던 것과 같은 방식으로 넘어 가지 않습니다. 내가 대신 할 때하지만 방법 대신 그냥 함수를 만들고 그것을 작동합니다.transitionend가 호출 될 때 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

transitionend가 호출 될 때 javascript 메서드가 호출되지 않습니다.

답변

관련 문제