AngularJS CSS列表动画答案

【问题标题】：AngularJS CSS list animationAngularJS CSS列表动画
【发布时间】：2015-10-31 15:41:27
【问题描述】：

我无法弄清楚一些基本的 AngularJS 1.4+CSS 动画内容。

我有一个列表，当达到最大项目数（下例中为 5 个）时，新项目总是在顶部进入并在底部退出。

下面的代码成功地为这个场景做了一个淡入淡出动画：

angular.module("testApp", ["ngAnimate"])
  .controller("testCtrl", function($scope) {
    var lastId = 0;
    $scope.items = [];
    $scope.add = function() {
      if (!$scope.newValue) { return; }
      $scope.items.unshift({id: ++lastId, name:$scope.newValue});
      $scope.newValue = '';
      while ($scope.items.length > 5) {
        $scope.items.pop();
      }
    };
  });

.list-item.ng-enter {
  transition: all 0.4s ease-out;
  opacity: 0;
}
.list-item.ng-enter.ng-enter-active {
  opacity: 1;
}
.list-item.ng-leave {
  transition: all 0.4s ease-out;
  opacity: 1;
}
.list-item.ng-leave.ng-leave-active {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.min.js"></script>
<form ng-app="testApp" ng-controller="testCtrl">
  <div>
    <input type="text" ng-model="newValue" />
    <button ng-click="add()">Add</button>
  </div>
  <table>
    <tr class="list-item" ng-repeat="item in items track by item.id">
      <td>{{item.name}}</td>
    </tr>
  </table>
</form>

然而，褪色并不是我真正想要的。我希望添加的项目在高度上扩展，就像从顶部滑入一样，退出的项目在高度上降低，就像从底部滑出一样，并且保留的项目向下滑动以移动到新位置。但我不确定如何实现这一点。

我尝试使用height 属性代替opacity，但这似乎效果不佳。另请注意，我不希望为最终结果明确指定高度，而是像往常一样使用字体自动调整大小。（这可能是我的问题的一部分。）

高度变化绝对是我的首选方法，但如果它是一个纯粹的幻灯片可能也可以，输入的项目淡入，离开的项目也淡出。然而，在这两种情况下，它都不能改变页面上父元素或任何周围元素的大小（当然，除非在列表首次增长时不删除元素）。

（通常一次只有一个项目会进入和离开，但有时可能会有两个项目进入和/或离开。如果动画可以适当延迟以使它们看起来按顺序滑动就好了你会想到，但如果太复杂，我可以不这样做。）

可能还值得一提的是，在页面的上一个迭代中，我使用 jQuery 动画“slideUp”来删除项目，并使用“slideDown”来添加它们——按照这个顺序，因为我也手动插入/删除项目（这是 Angular 之前的版本）。它工作得很好，我正在尝试复制这种效果，虽然我不确定 CSS 动画（或 ng-repeat）是否支持这样控制动画顺序。

【问题讨论】：

标签： html css angularjs css-animations

【解决方案1】：

好的，经过更多的实验，下面的代码似乎可以工作。

关键变化：

表格的动画效果似乎不太好。改用 <li> 似乎效果更好。
除了动画 max-height 之外，还需要 overflow-y: hidden。

angular.module("testApp", ["ngAnimate"])
  .controller("testCtrl", function($scope) {
    var lastId = 0;
    $scope.items = [];
    $scope.add = function() {
      if (!$scope.newValue) { return; }
      $scope.items.unshift({id: ++lastId, name:$scope.newValue});
      $scope.newValue = '';
      while ($scope.items.length > 5) {
        $scope.items.pop();
      }
    };
  });

.list-item.ng-enter {
  transition: all 0.5s linear;
  max-height: 0;
  overflow-y: hidden;
}
.list-item.ng-enter.ng-enter-active {
  max-height: 20px;
}
.list-item.ng-leave {
  transition: all 0.5s linear;
  max-height: 20px;
  overflow-y: hidden;
}
.list-item.ng-leave.ng-leave-active {
  max-height: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.min.js"></script>
<form ng-app="testApp" ng-controller="testCtrl">
  <div>
    <input type="text" ng-model="newValue" />
    <button ng-click="add()">Add</button>
  </div>
  <ul>
    <li class="list-item" ng-repeat="item in items track by item.id">
      {{item.name}}
    </li>
  </ul>
</form>

【讨论】：