Angular1: Add animation only to NEW entries in ng-repeat

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div ng-app="app">
  <div ng-controller="TestingCtrl as vm">
    <table>
      <tr ng-repeat="p in vm.persons" class="animate-new">
        <td>{{p.navn}}</td>
      </tr>
      <button ng-click="vm.new($index)">
        Add new person
      </button>
    </table>
  </div>
</div>

CSS

.animate-new.ng-enter {
  transition: 1.5s linear all;
  opacity: 0;
}
.animate-new.ng-enter.ng-enter-active {
  opacity: 1;
}

JavaScript

angular.module('app', ['ngAnimate'])
.controller('TestingCtrl', function TestingCtrl($rootScope) {
  var vm = this;
  vm.persons = [];
  vm.new = function() {
     setTimeout(function(){
       $rootScope.$apply(function () {
         vm.persons.push({'navn': 'Tor'});
       });
     },100);
    //vm.persons.push({'navn': 'Tor'});
  }
});