Css 正在使用angular.js查找向下滑动动画的改进

我有一个正在运行的代码示例（），它显示了使用angular.js（1.2.0）的向下滑动动画。但有两个问题我不知道如何解决：

a） 单击“添加项目”链接时，动画首先向下移动“添加项目”链接，然后从顶部滑入新项目。“添加项目”链接与新出现的项目一起向下滑动，这是如何改变的

b） 当页面第一次加载时，如何防止项目淡入

HTML

JS

谢谢你的帮助

a）据我所知，这只能通过负利润率顶部过渡到目标值5px来实现。这有一个问题：你必须知道一件物品的确切高度

@-webkit-keyframes slide_down {
  0% {
    margin-top: -68px;
    opacity: 0;
    z-index: -100;
  }

  99% {
    z-index: -100;
  }

  100% {
      margin-top:5px;
    opacity: 1;
    z-index: 0;
  }
}

b） 您可以使用$animate服务。该服务有一个已启用的方法，因此您可以随时禁用或启用动画。以下是控制器代码，用于在开始时禁用动画，并在开始后启用动画。诀窍是$timeout服务。这样，您可以推迟激活动画，直到下一个摘要周期发生：

function MyCtrl($scope, $animate, $timeout) {
    $animate.enabled(false);

    $scope.name = 'foo';

    $scope.items = [
        {name: 'Item 1', color: 'blue'},
        {name: 'Item 2', color: 'red'}
    ]

    $scope.addItem = function() {
        $scope.items.push({name: 'Another item', color: 'black'})
    }
    $timeout(function(){
     $animate.enabled(true);
    });
}

以下是工作示例：

---

您找到解决方案了吗？

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

function MyCtrl($scope) {
    $scope.name = 'foo';

    $scope.items = [
        {name: 'Item 1', color: 'blue'},
        {name: 'Item 2', color: 'red'}
    ]

    $scope.addItem = function() {
        $scope.items.push({name: 'Another item', color: 'black'})
    }
}

@-webkit-keyframes slide_down {
  0% {
    margin-top: -68px;
    opacity: 0;
    z-index: -100;
  }

  99% {
    z-index: -100;
  }

  100% {
      margin-top:5px;
    opacity: 1;
    z-index: 0;
  }
}

function MyCtrl($scope, $animate, $timeout) {
    $animate.enabled(false);

    $scope.name = 'foo';

    $scope.items = [
        {name: 'Item 1', color: 'blue'},
        {name: 'Item 2', color: 'red'}
    ]

    $scope.addItem = function() {
        $scope.items.push({name: 'Another item', color: 'black'})
    }
    $timeout(function(){
     $animate.enabled(true);
    });
}