Add new card functionality breaks swipe animation when card added when card view is not the active view

[antonfire]

Adding new cards to the card array while not in the tinder card view breaks the transition out animation when we come to swipe that card. I have made a codepen to show this with add card buttons on the card view and another view. Normally the card smoothly swipes out, but in the case of cards added off view, the animation is incorrect. Any help much appreciated thanks. http://codepen.io/antonfire/pen/xwrjPx

[antonfire]

After looking at this I identified the issue was arising from the following lines of code in the tinder cards .js:

  this.parentWidth = this.el.parentNode.offsetWidth;
  this.width = this.el.offsetWidth;

When a new card is added while in the view containing the Tinder cards directive the card width and parent element can be determined by javascript using offsetWidth. If the card is added while the view containing the directive is not the current view javascript cannot calculate offsetWidth as it is not currently rendered in the viewport (my understanding). As such I used the following workaround, replace the previous code with the following:

  this.parentWidth = window.innerWidth;
  this.width = 300;

This is a bit of a hack as width will need to match width in tinder cards CSS and parentWidth will need to be adjusted to take account of any other elements the cards directive sits within.

Is there a better way to do this as it seems a little hacky?

Thanks