Animations in partial views is not working - angularjs

Question

I'm attempting to use ng-view to produce a simple slide effect between views. I am not sure If I am doing it right. The codes is as follows:
Script: (1.15)
<script src="js/lib/angular-1.1.5/angular.min.js"></script>
Routing:
app.config(function ($routeProvider) {
$routeProvider.
when("/", { templateUrl: "partials/loading.html" }).
when("/session", {templateUrl: "partials/session.html", controller: "TimerController" }).
when("/settings", { templateUrl: "partials/settings.html", controller: "SettingsController" }).
otherwise({ redirectTo: "/" });
HTML containing ng-view and ng-click used to switch views:
<div class="flex-container viewport">
<div class="flex-item-1">
<div>
<button class="overlay btn icon-cog" ng-click="changeView('/settings')" type="button"></button>
</div>
</div>
<div ng-view class="flex-item-2" ng-animate="{enter: 'enter', leave: 'leave'}"></div>
<div class="flex-item-3">
<div>
<button class="btn btn-5 btn-5a icon-cog" ng-click="setTimer(3)">
<span>3</span>
</button>
</div>
<div>
<button class="btn btn-5 btn-5a icon-cog" ng-click="setTimer(5)">
<span>5</span>
</button>
</div>
<div>
<button class="btn btn-5 btn-5a icon-cog" ng-click="setTimer(10)">
<span>10</span>
</button>
</div>
<div>
<button class="btn btn-5 btn-5a icon-cog" ng-click="setTimer(15)">
<span>15</span>
</button>
</div>
</div>
Controller fn used to switch views:
$scope.changeView = function (view) {
$location.path(view);
};
CSS used to implement animation effect:
.enter-setup {
position:absolute;
-webkit-transition: 3.3s ease-out all;
-webkit-transform:translate3d(100%,0,0);
}
.enter-setup.enter-start {
position:absolute;
-webkit-transform:translate3d(0,0,0);
}
.leave-setup {
position:absolute;
-webkit-transition: 3.3s ease-out all;
-webkit-transform:translate3d(0,0,0);
}
.leave-setup.leave-start {
position:absolute;
-webkit-transform:translate3d(-100%,0,0);
}
The content still shows (but now with a flicker) and the slide animations do not work. Any help would be appreciated.
Update: I fixed the css syntax to 1.15. Unfortuneatly it still isn't working. I'm using flexbox and I'm thinking this is the cause of the problem. Anyone have similar problems when using ng-animate + flexbox?

Answer 1

You are using the 1.1.5 version, but the CSS sintaxe that you are using is from 1.1.4.
The correct is enter-active instead of enter-start and just enter instead of enter-setup
Take a look at the 1.1.5 documentation
And check some samples at NG Animate Sample Site
And if you use just -webkit-transform, this will work only in chrome and safari... Add the others vendors too.