angularjs - zasada działania animacji

Witam,
jak widać ostatnio skupiłem się na angularze i rozwiązałem wiele problemów, ale chcę wykonać animację i różnie z nią mi idzie.

We wszelkich tutorialach są różne metody tworzenia animacji, ale nie rozumiem ogólnej zasady. Skąd angular wie kiedy animacja ma być wykonywana i w jaki sposób?

Dla przykładu. Chcę wykonać prostą galerię:

<div style="background-image: url('{{ link }}');"></div>

<ul>
  <li ng-repeat="elem in list">
      <img ng-src="{{ elem.src }}" ng-mouseenter="mouse(elem.bigSrc)" />
  </li>
</ul>

Angular:

function nazwa_komtrolera($scope,$http) {
   // tutaj pobieram dane

   $scope.mouse = function(name){
      $scope.link = name;
   }
}

Jest to wycinek kodu i wszystko działa poprawnie, czyli po najechaniu na element z listy zmieniane jest tło na inny obrazek. I teraz jaką metodą dodać animację? Wziąłem jakiegoś gotowca:

.animate-enter, 
.animate-leave
{ 
  -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  position: relative;
  display: block;
} 
 
.animate-enter.animate-enter-active, 
.animate-leave {
  opacity: 1;
  top: 0;
  height: 30px;
}
 
.animate-leave.animate-leave-active,
.animate-enter {
  opacity: 0;
  top: -50px;
  height: 0px;
}

I zmieniłem:

<div style="background-image: url('{{ link }}');"></div>

na:

<div class="animate" style="background-image: url('{{ link }}');"></div>

To nic nie dało. W jaki sposób angular reaguje na animacje? Skąd wie kiedy ma ona się pojawić?
Ja chcę zrobić tak, żeby pojawiła się jakakolwiek animacja dla tego background-image.

Proszę nie odsyłać mnie do googla lub dokumentacji - już je czytałem, ale nie widzę tam odpowiedzi na moje pytania.

P.S. mam wczytany angular-animate.js

Jeszcze jedno - znalazłem taki tutorial, ale nie rozumiem dwóch rzeczy:

1. isActive($index) - co to za rodzaj odwołania $index? Tym bardziej, że w kodzie jest tak:

    // initial image index
    $scope._Index = 0;

    // if a current image is the same as requested image
    $scope.isActive = function (index) {
        return $scope._Index === index;
    };

Czy to oznacza, że $index to $scope._Index?

2. Nigdzie nie ma ng-hide, a działa przy każdej zmianie zdjęcia?

http://www.script-tutorials.com/photo-gallery-with-angularjs-and-css3/