ng-animate в ng-repeat не работает

Мне было поручено создать каскадный эффект для списка элементов (каждый появляется на долю секунды позже другого). Так что вы можете себе представить, как я был взволнован, когда обнаружил ng-animate. Я уже заполнил свой список ng-repeat, так что это казалось таким же простым, как добавить это и изменить CSS. Это то, к чему я стремлюсь: Как задержать ngAnimate в ngRepeat

Но, похоже, он на самом деле не работает. Есть идеи? Вот мой пример скрипки: скрипка ng-animate.

HTML

<ul class="results-nav">
     <li class="" ng-animate="'animate'" ng-repeat="domain in resultsNav.domain" ng-click="scrollTo(domain.id)">{{domain.title}}</li>
</ul>

css

.animate-enter {
    -webkit-transition: 1s linear all; /* Chrome */
    transition: 1s linear all;
    opacity: 0;
}

.animate-enter.animate-enter-active {
    opacity: 1;
}

Как вы можете видеть в моей скрипке, она ничего не делает при запуске.