Angular: ng-animate

figure out how to get ng-animate to work on ng-repeat <li>

by enigmarm

HTML

<div ng-controller="ctrl">

    <div class="results-nav-wrapper" >
        <p> Domain</p>
        <ul class="results-nav">
            <li class="" ng-animate="'animate'" ng-repeat="domain in resultsNav.domain" ng-click="scrollTo(domain.id)">{{domain.title}}</li>
        </ul>
        Page
        <ul class="results-nav">
            <li ng-repeat="page in resultsNav.page" ng-click="scrollTo(page.id)" collapse="page.collapse">{{page.title}}</li>
        </ul>
    </div>
</div>

CSS

.results-nav-wrapper {
	margin-left: 0px;
	border: 1px solid black;
}

.results-nav {
	
}

.results-nav  li{
	list-style: none;
	margin: 2px 2px 2px 0px;
	padding: 5px;
	background: #f6f6f7;
	font-size: 1em;
	font-weight: bold;
	position: relative;
}

.results-nav li:hover {
	background-color: blue;
}

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

JavaScript

function ctrl($scope) {
    $scope.resultsNav = 
		{
			"domain":[
				{"title":"Backlinks", "id":"backlinks"},
				{"title":"Domain Name", "id":"domain-name"},
				{"title":"Authority Scores", "id":"authority-scores"},
				{"title":"Social Media Metrics", "id":"social-media-metrics"},
				{"title":"Popularity Scores", "id":"popularity-scores"}
				],
			"page":[
				{"title":"On-Page", "id":"on-page"},
				{"title":"Backlinks", "id":"page-backlinks"},
				{"title":"Authority Scores", "id":"page-authority-scores"},
				{"title":"Social Media Metrics", "id":"page-social-media-metrics"}	
				],
		};


}