调用transitionend时未调用的javascript方法
调用transitionend时未调用的javascript方法
提问于 2016-11-24 09:21:21
我制作了这个动画，当你点击一张卡片，它会转到全屏。当我在卡片上调用过渡端时，它不会像我所期望的那样进入到方法中。当我做同样的事情时，而不是这个方法，我只是做了一个函数，它起作用了。
以下是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;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2016-11-24 13:01:55
- 您将函数绑定到
'this'而不是this，即绑定到字符串，而不是类范围！ - 当您从
function返回expandCard时，它不会绑定到类的上下文。
演示 =固定代码：
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');
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40782292
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号