0

模型更改时如何在 ng-repeat 中运行新元素的动画？当模型更改时，角度会自动创建新元素，在我看来，没有办法知道它（我在文档中没有找到任何事件）。我现在解决了这个问题，这要归功于setTimeout(O, runAnim)我的自定义指令的链接函数何时执行（它在创建新元素时执行，但在添加到 DOM 之前），因为我期望在将新元素添加到 DOM 之后执行计时器函数（所以它被渲染），但我不确定这是否适用于每个浏览器和每种情况，因为角度内部。有没有更好的方法来获得这种行为？

EDI1：当元素被移除，模型改变时，这将不起作用（如果我想淡出它们）

索引.html

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
    <meta charset="utf-8" />
    <title>Angular js</title>
    <script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/Controllers.js"></script>
</head>
<body ng-controller="MyController">
      <ul>
          <li ng-repeat="user in users" ng-bind="user" my-anim></li>
      </ul>
</body>
</html>

控制器.js

function MyController ($scope) {
    $scope.users = ['foo', 'bar'];
}

应用程序.js

angular.module("MyApp", [])

    .directive('myAnim', function () {
        return function (scope, elem, attr) {
            elem.hide();
            setTimeout(function () {
                elem.fadeIn();
            }, 0);
        }
    });
4

3 回答 3

2

这已添加到 angular 的实验版本之一中。请参阅这篇文章以了解它是如何工作的：

http://www.yearofmoo.com/2013/04/animation-in-angularjs.html

于 2013-06-24T20:15:17.473 回答
1

您可以使用 CSS3 动画而不是 jQuery。它们速度更快，适用于所有现代浏览器。通过动画不透明度或元素尺寸应该很容易实现简单的淡入。它将在元素添加到 DOM 时开始。如果将动画迭代计数设置为 1，它将在第一次迭代后停止。

网络上有大量的 CSS3 动画教程。也许你想从这里开始： http: //www.w3schools.com/css/css3_animations.asp

如果您对该主题更感兴趣，这是一篇好文章：http ://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/

在您的情况下，淡出似乎更加困难，因为您无法为已从 DOM 中删除的对象设置动画。无论是使用 jQuery 还是使用 CSS3。我看到的唯一方法是分两步更新您的数组。首先标记将被删除的元素，例如使用触发动画的某个类（或使用 jQuery）。然后在第二步中实际删除它们。

于 2013-11-05T17:46:02.920 回答
0

这可能会显示一些指针，直到 Angular 1.2 变得稳定。 简单示例

于 2013-10-14T07:33:09.470 回答