How can I get the new elements added into an ng-repeat to animate the background-color? I don't want existing elements that load with the page to animate, however. Only the ones added when a button click event.

**Index.html**

```
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="app">
      <main-component></main-component> 
    </div>
  </body>

</html>

```

**Script.js**

```
console.clear();

function mainController() {
  var model = this;
  model.fields = [];
  model.fields.push("field1");
  model.fields.push("field2");

  model.addField = function(label) {
    console.log(label);
    model.fields.push(label);
  }
}

var app = angular.module('app', ['ngAnimate']);

app.component("mainComponent", {
  template: `
    <button ng-click="model.addField('New Field')">Add Field</button><br /><br />
    <div class="field-container fadein" ng-repeat='f in model.fields track by $index'>{{f}}</div>
  `,
  controllerAs: "model",
  controller: [mainController]
});

```

**styles.css**

```
/* Styles go here */
.field-container {
  width: 200px;
  height: 80px;
  border: 1px solid black;
  background-color: yellow;
}

.fadein {
  background-color: white;
  transition: background-color 1000ms linear;
}

```

[Here's the plunker](http://plnkr.co/edit/1lwcagB2MyODpLztFfIB?p=preview)