Ionic Tinder 卡片添加新卡片功能在卡片视图不是活动视图时添加卡片时会中断滑动动画

Question

当我们刷卡时，不在 tinder 卡片视图中向卡片数组添加新卡片会中断过渡动画。我制作了一个 codepen http://codepen.io/antonfire/pen/xwrjPx 来显示这一点，并在卡片视图和另一个视图上添加卡片按钮。通常卡片会顺利滑出，但在卡片添加关闭视图的情况下，动画不正确。我正在使用以下代码添加卡片。

  var cardTypes = [
    { image: 'http://api.randomuser.me/portraits/women/31.jpg' },
    { image: 'http://api.randomuser.me/portraits/women/32.jpg' },
    { image: 'http://api.randomuser.me/portraits/women/33.jpg' },
    { image: 'http://api.randomuser.me/portraits/women/34.jpg' },
    { image: 'http://api.randomuser.me/portraits/women/35.jpg' },
    { image: 'http://api.randomuser.me/portraits/women/36.jpg' },
    { image: 'http://api.randomuser.me/portraits/women/37.jpg' },
  ];

  $scope.cards = Array.prototype.slice.call(cardTypes, 0);

  $scope.cardDestroyed = function(index) {
    $scope.cards.splice(index, 1);
  };

  $rootScope.addCard = function() {
    var newCard = cardTypes[Math.floor(Math.random() * cardTypes.length)];
    newCard.id = Math.random();
    $scope.cards.push(angular.extend({}, newCard));
  }

当我们在与卡片相同的视图中添加卡片时，此代码有效，但如果我们从另一个视图控制器添加卡片，则它不起作用。

非常感谢任何帮助。

Answer 1

查看此内容后，我发现问题是由火种卡 .js 中的以下代码行引起的：

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

当在包含 Tinder 卡片指令的视图中添加新卡片时，卡片宽度和父元素可以通过 javascript 使用 offsetWidth 确定。如果在包含指令的视图不是当前视图时添加卡片，则 javascript 无法计算 offsetWidth，因为它当前未在视口中呈现。因此，我使用了以下解决方法，将之前的代码替换为以下代码：

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

这有点小技巧，因为 width 需要匹配 tinder 卡片 CSS 中的 width 并且需要调整 parentWidth 以考虑卡片指令所在的任何其他元素。