为什么不添加ng离开/ng-enter类？

Question

根据https://docs.angularjs.org/api/ng/directive/ngRepeat#animations的角度文档

".enter -当一个新的项被添加到列表中时，或者当一个项目在筛选器之后被显示时 .leave -当某项从列表中删除或某项被筛选出时“

然而，当数组中的I .push({})或.splice(-1，1)时，这两个类都不会添加到ng-重复。有什么问题吗？

<div ng-controller="MyCtrl">
   <button ng-click="addLine()">
     add
   </button>
   <button ng-click="removeLine()">
     remove
   </button>
  <div ng-repeat="line in lines">
      <div class="preview">{{$index}}</div>
   </div>
</div>
var myApp = angular.module('myApp', ['ngAnimate']);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
        $scope.addLine = function(){
        $scope.lines.push({})
    }
    $scope.removeLine = function(){
        $scope.lines.splice(-1, 1)
    }
    $scope.lines = [{
        text: 'res1'},
    {
        text: 'res2'}];
}

正如泰德在他的回答中所指出的，需要有用于..ng enter/..ng休假的实际css样式，否则ngAnimate模块将不会向DOM元素中添加..ng enter类。

更清楚的是，我现在并不关心动画的制作。这里的问题是..ng类实际上不会应用于元素的class属性，除非您有..ng enter的css样式

工作柱塞 http://plnkr.co/edit/TqpdIy6syikBhAeb5Kw3?p=preview

Answer 1

要添加这些类，必须在应用程序中加载动画模块。

有关如何执行此操作，请参见ngAnimate文档。

首先，必须加载附加模块的.js文件：

<script src="angular.js">
<script src="angular-animate.js">

然后将其作为应用程序的依赖模块列出：

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

ngAnimate模块还要求元素在CSS或JS中定义其转换：

对于CSS转换，必须在开始的CSS类中定义转换代码(在本例中是..ng enter)。目标类是转换的方向。

如果您添加了如下内容：

/* The starting CSS styles for the enter animation */
.fade.ng-enter {
  transition:0.5s linear all;
  opacity:0;
}

/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
  opacity:1;
}

它应该开始起作用了。

非常清楚，因为文档没有明确地这样说:如果动画没有在CSS或JS中定义，ngAnimate模块甚至不会添加类，它只会跳过所有的动画。