// If the card is nearly gone. // 如果元素应当消失 if (isNearlyInvisible) {
// Bail if there's no target or it's not attached to a parent anymore. if (!this.target || !this.target.parentNode) return; // 从dom树中删除该元素 this.target.parentNode.removeChild(this.target);
// Slide all the other cards. // 更新其他元素的位置 this.animateOtherCardsIntoPosition(targetIndex);
} elseif (isNearlyAtStart) { // 如果需要归位,则直接重置 target this.resetTarget(); } } // 处理删除元素以后,其他元素位置变化的动画 animateOtherCardsIntoPosition (startIndex) { // If removed card was the last one, there is nothing to animate. // Remove the target. // 如果被移除的元素是最后一个,那就不影响其他元素,直接重置 target 元素 if (startIndex === this.cards.length) { this.resetTarget(); return; } // 在动画结束以后,清除样式 const onAnimationComplete = evt => { const card = evt.target; card.removeEventListener('transitionend', onAnimationComplete); card.style.transition = ''; card.style.transform = '';
this.resetTarget(); };
// Set up all the card animations. // 设置被删除元素,之后的所有元素的向上偏移动画 for (let i = startIndex; i < this.cards.length; i++) { const card = this.cards[i];
// Move the card down then slide it up. // 由于此时target 元素已经被移除,真正的动画效果不是直接向上,而是先腾出原先 元素的位置,即向下移动一个元素的高加间距的距离 card.style.transform = `translateY(${this.targetBCR.height + 20}px)`; card.addEventListener('transitionend', onAnimationComplete); }
// Now init them. requestAnimationFrame(_ => { for (let i = startIndex; i < this.cards.length; i++) { const card = this.cards[i];
// Move the card down then slide it up, with delay according to "distance" // 等到下一帧所有元素都下移以后,为卡片元素设置动画运动曲线与延时,并清空 transform ,这样接着才会产生动画向上偏移的动画 card.style.transition = `transform 150ms cubic-bezier(0,0,0.31,1) ${i*50}ms`; card.style.transform = ''; } }); } // 重置元素 resetTarget () { if (!this.target) return;