Question

在ng-repeat部分中有动画事件处理程序，用于输入，离开和移动。但是当我们求助或过滤用于ng-repeat的数组时，才会触发move事件。如果我只更改对象的属性值该怎么办？然后根本没有触发任何事件。有没有办法在我更改对象属性后手动触发事件？

这是一个小提琴：http://jsfiddle.net/U3pVM/15002/

HTML：

<ul>
      <li ng-repeat="d in data">
          <div class="lala" style="width: {{d.a}}px">foo</div>
      </li>
</ul>

JS：

function TodoCtrl($scope) {
    $scope.data = [{a:100},  {a:120}];

    // I would like to animate the value changes
    $scope.change = function()  {
        $scope.data[0].a = 110;
        $scope.data[1].a = 90;
    }
}

Answer 1

只需将转换添加到主类

.lala{
   transition:0.5s;
   background-color:grey;
}

https://jsfiddle.net/U3pVM/15006/

Answer 2

你的班级定义错了。

.lala,
.lala.ng-enter,
.lala.ng-move,
.lala.ng-leave {
     background-color: grey;
     -webkit-transition:all 1s linear;
     -moz-transition:1s linear all;
     -o-transition:1s linear all;
     transition:all 1s linear;
 }

查看工作小提琴here。

AngularJS可以手动触发移动动画事件

2 个答案: