Html AngularJS CSS列表动画

我很难理解一些基本的AngularJS 1.4+CSS动画内容

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

以下代码在此场景中成功执行淡入淡出动画：

angular.module（“testApp”[“ngAnimate”]）
.controller（“testCtrl”，函数（$scope）{
var-lastId=0；
$scope.items=[]；
$scope.add=函数（）{
if（！$scope.newValue）{return；}
$scope.items.unshift（{id:++lastId，name:$scope.newValue}）；
$scope.newValue=''；
而（$scope.items.length>5）{
$scope.items.pop（）；
}
};
});
.list-item.ng-enter{
过渡：所有0.4s缓解；
不透明度：0；
}
.list-item.ng-enter.ng-enter-active{
不透明度：1；
}
.list-item.ng-leave{
过渡：所有0.4s缓解；
不透明度：1；
}
.list-item.ng-leave.ng-leave-active{
不透明度：0；
}

添加
{{item.name}
好的，经过更多的实验，下面的代码似乎可以工作

主要变化：


表格的动画效果似乎不太好。相反，使用
似乎效果更好
overflow-y:hidden
除了设置
最大高度的动画外，还需要设置动画



angular.module（“testApp”[“ngAnimate”]）
.controller（“testCtrl”，函数（$scope）{
var-lastId=0；
$scope.items=[]；
$scope.add=函数（）{
if（！$scope.newValue）{return；}
$scope.items.unshift（{id:++lastId，name:$scope.newValue}）；
$scope.newValue=''；
而（$scope.items.length>5）{
$scope.items.pop（）；
}
};
});
.list-item.ng-enter{
过渡：所有0.5s线性；
最大高度：0；
溢出y：隐藏；
}
.list-item.ng-enter.ng-enter-active{
最大高度：20px；
}
.list-item.ng-leave{
过渡：所有0.5s线性；
最大高度：20px；
溢出y：隐藏；
}
.list-item.ng-leave.ng-leave-active{
最大高度：0；
}

添加


{{item.name}