Javascript 删除对象时执行元素指令动画的角度方式？

在本例中，我呈现一个Objectspayments的作用域数组，并将每个数组传递给支付指令，如下所示：

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

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 mixin实现简单性

同样，上面的工作与预期一样，我从payments数组中删除了一个元素，并且从DOM中删除了与删除的数组元素对应的指令模板/视图，这是完美的，只是它立即被删除了

编辑： 像fadeOut这样的动画不起作用的原因是，在CSS中指定的时间之后，立即被删除，这是因为动画在自定义标记上起作用，该标记只是实际元素的包装

指令JS定义：

动画应作用于指令自定义标记引用/包装的模板

partials/payment.html

在这种情况下，它将是class=a-payment的div，当然，当动画完成时，它应该删除payment标记元素

最新版本的动画制作方法是什么。元素指令是否从DOM中删除

---

非常感谢您，如果您需要更多我正在使用的代码，请告诉我。

您可以通过多种方式执行此操作，例如，您可以创建一个将触发CSS动画的类，在删除对象之前，您首先将其分配给该类。以下是方法：

  var deleteAnimDuration = 1000; // let's use one second for our example

  $scope.deletePayment = function(index) {
    //This deletes the Array Element and removes associated
    //Directive template from the DOM
    $scope.payments[index].deleteAnim = true; // or whatever property makes sense to you
    $timeout(function(){
        $scope.payments.splice(index, 1);
    }, deleteAnimDuration);
  }

然后在指令上，可以使用ng类：

由于此示例动画不透明度淡入将运行一秒钟，因此需要将$timeout的deleteAnimDuration设置为1秒1000毫秒

那么，会发生什么：

您单击付款上的“删除” 它将payment.deleteAim设置为true，从而将删除类分配给元素 设置动画持续时间的超时 动画开始 动画结束 元素从DOM中删除 从DOM的角度来看，这是一个概念：

var divs=document.getElementsByTagName'div'； 对于var i=0；i .my-animation.ng-left{不透明度：1；过渡：不透明度300ms线性；}

.my-animation.ng-left.ng-left-active{不透明度：0；过渡：不透明度300ms线性；}

庆祝

---

这可能是因为大多数自定义标记（如您的）都是display:inline；默认情况下

---

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

您可以先淡出div，然后从支付中删除内容。我觉得这个动画很酷，但是这个示例没有使用自定义指令：这样做的目的是将动画应用到标记上，并使其表现得像一个普通的HTML标记，即，，等等。这与大多数自定义标记（如您的）都是display:inline这一事实无关；默认情况下，是吗？您是否将它们的样式设置为CSS/SASS中的display:block？@GregL。就这样！绝对正确@乔西：好的，补充回答。你好，谢谢你的回复。简而言之，这不起作用，因为这不是一个常规的HTML标记，这是一个通过templateUrl“包装”Template的自定义指令，虽然在阅读文档后，您的答案当然是显而易见的，但结果是，该元素不是淡出，而是在指定时间后立即消失。这是“预期的”，因为动画发生在自定义标记上，而不是在其包含的元素中。它是自定义指令并不重要，常规HTML标记和自定义指令标记之间没有真正的区别。这里有一个plunker来演示您的确切用例：您完全正确，它与它是一个自定义指令无关，就像一个评论员提到的，它只是关于默认的显示值。我把它设置为block，一切都开始顺利进行。如果您愿意，您可以将其添加到您的答案中，我将其设置为接受答案。不，正如您从我的示例中观察到的，它不需要是display:block。它适用于内联。请仔细检查。谢谢，我可以在您的示例中看到它工作得很好，非常感谢您对我的代码进行了修改！，但我可以向您保证，对于我的本地代码，只有包含display:block属性，它才会起作用。您好！这是一个非常全面的答案，你提出的逻辑是完美的，没有其他方式来描述它，但是，我

---

t不起作用，因为动画的目标是自定义指令，而不是引用的模板。所以结果是，如果标签被淡出。。。一旦完成，它将立即删除其内部模板！您的runnable示例非常有效，因为它直接在“常规”HTML标记上应用动画。在指令上尝试，更多信息请参阅我的问题更新。谢谢你的回答。嗨，谢谢。如果是这样的话，你可以很容易地修改代码来处理，比如a-payment元素或者任何需要淡出的元素。但我不明白，你说你这里有其他东西/标签，支付元素会消失，但它的内容在被移除之前不会被破坏？没错！这是因为“包装器”没有“包装”它的内容。如果您使用开发工具检查元素，您可以看到该元素的结构是正确的HTML，但元素本身从未获得任何高度，因此动画从未对其内容“起作用”。哦，这改变了情况，但原理保持不变。您只需要在click事件处理程序中引用正确的元素。你能举个简单的例子吗？我想看看。再一次，你是对的！可以这样做，比如说，你的原始答案会很理想，但它确实有点像黑客，而不是棱角分明的方式。我看到的主要问题是。。好的，您可以设置contents DIV的动画，这很好，但是您还应该删除父元素，即绑定到payments数组中元素的标记。这三个任务需要链接在一起，对吗？我觉得angular有一个简单的方法来完成这个非常常见的用例。是的，先生。这是正确的答案，而在某些情况下显示：block是不需要的，在我的情况下它显然是需要的。我不知道为什么。不幸的是，当你想让它开始显示时，它很棘手：在这种情况下也没有。我要做的是将这个开始隐藏到CSS:display:block，但是要使用指令链接函数$element.hide

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

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

})();

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

  var deleteAnimDuration = 1000; // let's use one second for our example

  $scope.deletePayment = function(index) {
    //This deletes the Array Element and removes associated
    //Directive template from the DOM
    $scope.payments[index].deleteAnim = true; // or whatever property makes sense to you
    $timeout(function(){
        $scope.payments.splice(index, 1);
    }, deleteAnimDuration);
  }

<payment 
    ng-repeat="payment in payments" 
    data="payment" 
    ng-class="{deleting: payment.deleteAnim}">
</payment>

payment.deleting {
    transition: opacity 1s linear; // again, one second
    opacity: 0;
}