仅在指定事件上带有 animate.css 的 angularjs？

Posted 2023-03-06

【中文标题】仅在指定事件上带有 animate.css 的 angularjs？

【英文标题】：angularjs with animate.css on specified event only?

【发布时间】：2014-06-18 20:41:19

【问题描述】：

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

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

这个问题是每当我回来（例如从新页面），动画触发。我只希望在列表中添加新项目时才触发动画。

【问题讨论】：

请提供一个plunker或者jsfiddle，这样更容易理解具体的实现。

单页应用还是实际页面重新加载？

【参考方案1】：

如果您只需要在首次加载列表时避免动画，您可以禁用 $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

【参考方案2】：

这是我所知道的（几乎与 Khanh 完全一样）

app.controller("控制器",function($scope,$animate,$timeout)

$scope.listData = [];

$animate.enabled("false");

$timeout(function () 

    $animate.enabled("true");


);

);

【讨论】：

这个答案与我的答案不同，只是将true 替换为"true" 并将false 替换为"false"。不幸的是，这不起作用，因为 "true" 和 "false" 不是空字符串，并且两者都将在 javascript 中计算为 true。

@Khanh TO 不知道，一直在用“”编码

【参考方案3】：

当 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');
        
    );
);

【讨论】：

ng-enter 是由角度自动添加的，这会阻止加载吗？

【参考方案4】：

如果我理解你的问题，你的 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;