Question

当我们来刷卡时，在卡片阵列中添加新卡而不在火药卡视图中会破坏转换动画。我已经制作了一个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卡指令的视图中添加新卡时，可以使用offsetWidth通过javascript确定卡片宽度和父元素。如果在包含指令的视图不是当前视图时添加了卡，则javascript无法计算offsetWidth，因为它当前未在视口中呈现。因此，我使用了以下解决方法，将以前的代码替换为以下代码：

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

这有点像黑客，因为width需要在火种卡CSS中匹配width，parentWidth需要调整以考虑卡指令中的任何其他元素坐在里面。

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

1 个答案: