Question

我成功实现了使用animate.css

的angularjs 1.2动画

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

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

Answer 1

当listData被更改时，您可以使用$ watch in angular来添加该类，并限制添加数据...

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

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

Answer 2

如果您只需要在首次加载列表时避免动画，则可以禁用$ 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，请确保将代码移至成功函数内。

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

Answer 3

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

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

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

因此，当用户点击您的按钮时，您会重定向到用户可以添加新记录的视图，当您回到所有记录后，您只想显示项目中的效果已添加，在此位于列表最后位置的案例，您只需

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

Answer 4

这就是我所知道的（几乎和Khanh一样）



app.controller("Controller",function($scope,$animate,$timeout){

$scope.listData = [];

$animate.enabled("false");

$timeout(function () {

    $animate.enabled("true");


});


});

$animate.enabled("false"); $timeout(function () { $animate.enabled("true"); });

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

4 个答案: