AngularJS 动态删除元素时的 ng-repeat 动画效果

在本文中，我们将介绍如何在AngularJS中使用ng-repeat指令实现动态删除元素时的动画效果。

什么是AngularJS？

AngularJS是一个由Google开发的JavaScript框架，用于构建单页应用程序。它采用MVC（Model-View-Controller）的架构模式，通过数据绑定、依赖注入和模块化的方式将前端开发变得更加简单和高效。

ng-repeat指令

AngularJS中的ng-repeat指令用于在HTML模板中循环显示数据。它可以迭代数组或对象，并为每个元素生成相应的HTML标记。

示例代码如下：

<div ng-repeat="item in items">
  <p>{{item.name}}</p>
</div>

上述代码中，ng-repeat指令会遍历数组或对象items，并将每个元素的name属性显示在一个段落中。

动画效果的实现

要在删除元素时添加动画效果，我们可以使用AngularJS的内置动画模块ngAnimate。

首先，我们需要在页面中引入ngAnimate模块：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular-animate.min.js"></script>

接下来，在应用的主模块中注入ngAnimate模块：

var app = angular.module('myApp', ['ngAnimate']);

然后，我们可以使用ng-repeat指令的enter和leave属性来指定删除元素时的动画效果。

示例代码如下：

<style>
  .animate-enter {
    transition: all 0.5s ease;
    opacity: 0;
  }

  .animate-enter.animate-enter-active {
    opacity: 1;
  }

  .animate-leave {
    transition: all 0.5s ease;
    opacity: 1;
  }

  .animate-leave.animate-leave-active {
    opacity: 0;
  }
</style>

<div ng-repeat="item in items" class="animate-enter" ng-class="{'animate-leave': removeItem}">
  <p>{{item.name}}</p>
  <button ng-click="removeItem = true">Delete</button>
</div>

上述代码中，我们为ng-repeat指令的包裹元素添加了类名为animate-enter和animate-leave。通过ng-class指令，当点击删除按钮时，删除元素的包裹元素会添加animate-leave类名。在CSS中，我们定义了这两个类名的动画效果，实现了元素在新增和删除时的过渡效果。

接下来，我们需要在控制器中定义数据和删除元素的操作：

app.controller('myCtrl', function( $scope) {$ scope.items = [
    {name: 'Apple'},
    {name: 'Banana'},
    {name: 'Orange'}
  ];

  $scope.removeItem = false;
});

上述代码中，我们定义了一个名为items的数组，用于存储要显示的元素。removeItem变量用于控制元素的删除。

最后，我们需要在HTML模板中显示数据和绑定删除操作：

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="item in items" class="animate-enter" ng-class="{'animate-leave': removeItem}">
    <p>{{item.name}}</p>
    <button ng-click="removeItem = true">Delete</button>
  </div>
</div>

现在，当点击删除按钮时，被删除的元素会带着动画效果消失。