AngularJS：观察对象数组并为更改的属性设置动画

Question

我有一个$ scope集合，它不断通过websockets进行更新，因此数据大约每2秒就会进入一次。

假设我有这些数据，

var socketData = [{
  name: 'bob',
  age: '20',
  color: 'red'
}, {
  name: 'jack',
  age: '10',
  color: 'yellow'
}]

$scope.data = socketData;

并且它会不断变化，例如，这可能会在几秒钟之后发生。

var socketData = [{
  name: 'bob',
  age: '21',
  color: 'green'
}, {
  name: 'sam',
  age: '22',
  color: 'red'
}]

$scope.data = socketData;

在DOM中我有这个

<div ng-repeat="d in data">
  <p>{{d.name}}</p>
  <p>{{d.age}}</p>
  <p>{{d.color}}</p>
</div>

我想为每个已更改的属性设置动画（通过添加一个类并让它淡入）。

通过使用$ watch，我可以获得更改，但只能获取整个对象。

$scope.$watch('data', function(newVal, oldVal) {
    console.log(newVal) // whole object
    console.log(oldVal) // whole object
}, true);

所以问题是我不想为整个对象设置动画，而是要对属性本身进行动画处理。因此，如果为每个对象更改名称，在dom中我希望看到名称字段发生变化，而不是整个对象，只是个别更改，而我很难实现这一目标。