angularjs - Animations in partial views is not working -

i'm attempting use ng-view produce simple slide effect between views. not sure if doing right. codes 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 , ng-click used 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 switch views:

    $scope.changeview = function (view) {     $location.path(view); }; 

css used 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 flicker) , slide animations not work. appreciated.

update: fixed css syntax 1.15. unfortuneatly still isn't working. i'm using flexbox , i'm thinking cause of problem. have similar problems when using ng-animate + flexbox?

you using 1.1.5 version, css sintaxe using 1.1.4.

the correct enter-active instead of enter-start , enter instead of enter-setup

take @ 1.1.5 documentation

and check samples @ ng animate sample site

and if use -webkit-transform, work in chrome , safari... add others vendors too.