javascript - 删除对象时执行元素指令动画的 Angular 方式？

Question

我正在呈现一个作用域对象数组(在本例中为payments)，并将每个对象传递给一个payment指令，如下所示:

<div id="payable" ng-controller="PaymentsController">
  <payment ng-repeat="payment in payments" data="payment" class="payment"></payment>
</div>

这真的很好用!因此，当我从 Controller 的 scoped 数组中删除一个元素时，如下所示:

app.controller('PaymentsController', function($scope) {
  //The Payments Array(each object passed to a Directive)
  $scope.payments = [ { id: 1, amount: 10 }, { id: 2, amount: 15 } ]; 

  $scope.deletePayment = function(index) {
    //This deletes the Array Element and removes associated
    //Directive template from the DOM
    $scope.payments.splice(index, 1);
  }
});

CSS(为简单起见使用 compass mixins)

.payment.ng-enter {
  @include transition(all 2s ease-out);
  opacity: 0;
}

.payment.ng-enter-active {
  opacity: 1;
}

.payment.ng-leave {
  @include transition(all 2s ease-out);
}

.payment.ng-leave-active {
  opacity: 0;
}

同样，上述操作按预期工作，我从 payments 数组中删除了一个元素，并且从DOM，这是完美的，除了它会立即被删除!

编辑:像 fadeOut 这样的动画不起作用的原因是 ( < payment > ) 被立即删除(在 CSS 中指定的时间之后) 是动画作用于 ( < payment >) 自定义标签， < strong>这只是实际元素的包装。

指令JS定义:

(function() {
  var app = angular.module('paymentDirectives', []);

  app.directive('payment', function() {
    return {
      restrict: 'E',
      scope: {
        payment: '=data'  
      },
      templateUrl: 'partials/payment.html'
    };
  });

})();

动画应该作用于指令自定义标签( )引用/包装的模板

partials/payment.html

<div class="a-payment">
  <div class="content">
    <p>
      <label><a href="/#" class="important">{{payment.amount}}</a></label>
    </p>
  </div>
</div>

在这种情况下，它当然是带有 class="a-payment"的 div，当动画完成时，然后应该移除支付标签元素

为这种情况(即从 DOM 中删除元素指令)制作动画的 Angular 方式(对于最新版本)是什么？

在此先感谢您，如果您需要我使用的代码的更多信息，请告诉我。

Answer 1

这可能与大多数自定义标签(例如您的 <payment>)有关。 , 是 display: inline;默认情况下。

您应该将它们的样式设置为 display: block在 CSS/SASS 中。