Javascript 仅在指定事件上使用animate.css的angularjs？

我成功地用animate.css实现了angularjs 1.2动画

.list.ng-enter{
    -webkit-animation: fadeInLeft 1s;
    -moz-animation: fadeInLeft 1s;
    -ms-animation: fadeInLeft 1s;
    animation: fadeInLeft 1s;
}

---

问题是每当我回来（例如从新页面），动画就会被触发。我只想在列表中添加一个新项目时触发动画

如果您只需要在首次加载列表时避免动画，则可以禁用$animate服务，并在第一次摘要后再次启用它：

app.controller("yourController",function($scope,$animate,$timeout){
    $scope.listData = []; //your code to populate the list data

    $animate.enabled(false); //disable animation on page load

    $timeout(function () {
        $animate.enabled(true); //enable animation again after the first digest.
    });
});

如果通过$http服务加载listData，请确保将代码移动到success函数中

上面的代码全局禁用动画，如果这不是您想要的，您可以禁用并启用特定元素：

以下是我所知道的（与Khanh几乎完全相同）

app.controller（“controller”，函数（$scope、$animate、$timeout）{

$scope.listData=[]

$animate.enabled("false");

$timeout(function () {

    $animate.enabled("true");


});

}))

---

当listData发生更改时，您可以使用angular中的$watch添加该类，并限制添加数据

app.controller('customCntr', function($scope, $element) {
    $scope.listData = [];

    $scope.$watch('listData', function(oldVal, newVal) {
        if (oldval.length === newVal.length++) {
            $element.addClass('ng-enter');
        }
    });
});

---

如果我理解你的问题，你的html应该是这样的：

<button type="button" href="url to add new record"></button>

<ul class=".list">
   <li ng-repeat="element in elements"></li>
</ul>

---

请提供plunker或JSFIDLE，以便更容易理解具体的实现。单页应用程序或实际页面重新加载？此答案与我的答案不同，只是将

true

替换为

“true”

，将

false

替换为

“false”

。不幸的是，这将不起作用，因为

“true”

和

“false”

不是空字符串，在javascript中，这两个字符串都将被计算为

true

。@Khanh to不知道，一直使用“

ng enter

进行编码是通过angular自动添加的，这会防止加载时出现这种情况吗？

.list:last-child.ng-enter{
  -webkit-animation: fadeInLeft 1s;
  -moz-animation: fadeInLeft 1s;
  -ms-animation: fadeInLeft 1s;
  animation: fadeInLeft 1s;
}