Javascript ng repeat中的新元素动画

我正在使用带有某种风格的ng repeat，我将向数组中添加新项。这就是我所做的：

//代码在这里
var_app=angular.module（“userApp”，[]）
_应用控制器（“usrController”，功能（$scope）{
$scope.usrList=[]；
$scope.adduser=function（）{
console.log（$scope.newUsr）
$scope.usrList.push({
名称：$scope.newUsr
})
}
})

/*样式在这里*/
.listItem{
边框：1px实心#F00；
背景颜色：浅灰色；
填充：3倍；
边界半径：5px；
保证金：2倍；
宽度：100px；
}

地址用户

{{usr.name}

您需要使用模块并为设置类

首先，在项目中包括模块（记住也包括相应的脚本标记）：

然后定义所需的过渡/动画。例如：

.listItem.ng-enter {
    opacity: 0;
    transition: all .5s ease;
}
.listItem.ng-enter-active {
    opacity: 1;
}

---

演示：

如果在顶部添加一个带有淡入的新项目，您会怎么做？

.listItem.ng-enter {
    opacity: 0;
    transition: all .5s ease;
}
.listItem.ng-enter-active {
    opacity: 1;
}