angularjs - Apply a transition effect when loading next page through UI Router -

in below example

http://plnkr.co/edit/izimsvsstarlfviam7s7?p=preview

<div class="container"> <div ui-view></div> 

when clicking on home or button view part loading directly. need move current page(home) right left , new page(about) should load right left(transition effect)

how can possible?

i have fixed issue using ng-animate, added below css in code

[data-ui-view].ng-enter, [data-ui-view].ng-leave {               position: absolute;               left: 0;               right: 0;               -webkit-transition:all .5s ease-in-out;                 -moz-transition:all .5s ease-in-out;                 -o-transition:all .5s ease-in-out;                 transition:all .5s ease-in-out;             }              [data-ui-view].ng-enter {               opacity: 0;              -webkit-transform:translate(960px);               -moz-transform:translate(960px);               transform:translate(960px);              }              [data-ui-view].ng-enter-active {               opacity: 1;              -webkit-transform:translate(0px);               -moz-transform:translate(0px);               transform:translate(0px);             }              [data-ui-view].ng-leave {               opacity: 1;               /*padding-left: 0px;*/                  -webkit-transform:translate(0px);               -moz-transform:translate(0px);               transform:translate(0px);              }              [data-ui-view].ng-leave-active {               opacity: 0;               /*padding-left: 100px;*/               -webkit-transform:translate(-960px);               -moz-transform:translate(-960px);               transform:translate(-960px);             }