Position of the cards doesn't consider the height properly #20
Description
Cards are rendered so that it is possible to see the ones behind before the active one. This works perfectly, but if the cards dimensions are set to width: 500px; height: 500px, then the ones in the back are hidden.
I have started to play with the demo to check the origin of this issue, and I have realised that it is due to the transform: translate3d() scale() css property applied to each <td-card></td-card>.
I see that inside ionic.tdcards2.js, the function which takes care of ordering the cards is connected to the var sortCards inside the directive tdCards:
var cards;
var existingCards, card;
var i, j;
var sortCards = function() {
existingCards = $element[0].querySelectorAll('td-card');
for(i = 0; i < existingCards.length; i++) {
card = existingCards[i];
card.currentIndex = i;
if(!card) continue;
if(i > 0) {
(function(j) {
$timeout(function() {
var top = (j * 25);
var scale = Math.max(0, (1 - (j / 10)));
var animation = collide.animation({
duration: 800,
percent: 0,
reverse: false
})
.easing({
type: 'spring',
frequency: 5,
friction: 250,
initialForce: false
})
.on('step', function(v) {
existingCards[j].style.transform = existingCards[j].style.webkitTransform = 'translate3d(0, ' + top*v + 'px, 0) scale('+ scale*v +')';
})
.start();
}, 100 * j);
})(i);
}
card.style.zIndex = (existingCards.length - i);
}
};
I think that the issue is caused by the variables top and scale. Is there a reason why these variables are defined in the following way? Could they be improved by considering also the dimensions of the cards?
Thanks in advance for your reply!!