Ionic Tinder卡添加了新的卡功能，当卡视图不是活动视图时添加卡时打破滑动动画

Ionic Tinder cards add new card functionality breaks swipe animation when card added when card view is not the active view

本文关键字：视图 添加 活动 动画 Tinder 功能 Ionic      更新时间：2023-09-26

添加新的卡片到卡片数组，而不是在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));
  }

当我们在同一个视图中添加卡片时，这段代码可以工作，但是如果我们从另一个视图控制器添加卡片，它就不起作用了。

任何帮助，非常感谢。

看了这个后，我确定问题是由以下代码行在tinder cards .js中引起的:

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

当在包含Tinder cards指令的视图中添加新卡片时，卡片宽度和父元素可以由javascript使用offsetWidth确定。如果卡被添加，而包含指令的视图不是当前视图，javascript不能计算offsetWidth，因为它目前没有呈现在视窗中。因此，我使用了以下解决方案，用以下代码替换前面的代码:

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

这是一个有点黑客的width将需要匹配width在火种卡的CSS和parentWidth将需要调整，以考虑到任何其他元素的卡片指令内。

相关文章：