1 var StackCards = function(parent) {2 this.dom = parent;3 this.stack = ([]);4 5 this.dom.setAttribute('b', 'StackCards');6 }7 8 StackCards.prototype.top = function() {9 return this.stack[this.stack.length-1];10 }11 12 StackCards.prototype.push = function(card) {13 var top = this.top();14 15 card.setAttribute('b', 'Card');16 card.classList.add('Card-out');17 this.stack.push(card);18 19 card.addEventListener('transitionend', function(e){20 if (top != null)21 top.style.display = 'none';22 }, false);23 24 this.dom.appendChild(card);25 card.offsetTop; // Refresh render tree26 card.classList.remove('Card-out');27 }28 29 StackCards.prototype.pop = function() {30 var card = this.stack.pop();31 if (card != null) {32 var top = this.stack[this.stack.length-1];33 if (top != null)34 top.style.display = '';35 36 this.dom.removeChild(card);37 return card;38 }39 }40 41 42 ////////////////////////////////////////////////////////////7743 44 var TestCard = function(n) {45 var dom = document.createElement('div');46 dom.innerHTML = 'THIS IS A CARD ('+n+')';47 return dom;48 }49 50 ////////////////////////////////////////////////////////////////51 52 var ms; //main stack53 var n=1;54 55 window.addEventListener('load', function() {56 ms = new StackCards(document.body);57 58 var f = function(event){59 var c = new TestCard(n); n++;60 c.addEventListener('click', f, true);61 ms.push(c);62 }63 64 f();65 }, true);Enlace
El enlace para compartir es: