AngularJS - Animate ng-view transitions

Question

I have 2 html pages  welcome html and login html both of which are  inserted  into index html dependending on the URL via an ngview attribute and router provider  as part of my AngularJS app   An example of this can be found on the AngularJS home page under Wire up a Backend   My question  Is there a way to animate the transition between welcome html and login html

User · Answer

Try checking his post  It shows how to implement transitions between web pages using AngularJS s ngRoute and ngAnimate  How to Make iPhone-Style Web Page Transitions Using AngularJS  amp  CSS

User · Answer

Angularjs 1 1 4 has now introduced the ng-animate directive to help animating different elements  in particular ng-view   You can also watch the video about this new featue  UPDATE as of angularjs 1 2  the way animations work has changed drastically  most of it is now controlled with CSS  without having to setup javascript callbacks  etc   You can check the updated tutorial on Year Of Moo   dfsq pointed out in the comments a nice set of examples

User · Answer

I m not sure about a way to do it directly with AngularJS but you could set the display to none for both welcome and login and animate the opacity with an directive once they are loaded   I would do it some way like so  2 Directives for fading in the content and fading it out when a link is clicked  The directive for fadeouts could simply animate a element with an unique ID or call a service which broadcasts the fadeout  Template    lt div class  tmplWrapper  onLoadFadeIn gt       lt a href  somewhere else  fadeOut gt   lt  div gt    Directives   angular    directive  onLoadFadeIn     Fading   function  Fading         return function scope  element  attrs            element  animate             scope  on  fading   function           element  animate                                directive  fadeOut   function         return function scope  element  attrs          element bind  fadeOut   function e        Fading fadeOut e target                       Service   angular factory  Fading   function       var news    news setActiveUnit   function          rootScope  broadcast  fadeOut           return news       I just have put together this code quickly so there may be some bugs

User · Answer

Check this code   Javascript   app config     routeProvider    function  routeProvider        routeProvider when   part1     templateUrl     part1          routeProvider when   part2     templateUrl     part2          routeProvider otherwise   redirectTo    part1              function HomeFragmentController  scope         scope  on   routeChangeSuccess   function  scope  next  current             scope transitionState    active              CSS    fragmentWrapper       overflow  hidden      fragment       position  relative      -moz-transition-property  left      -o-transition-property  left      -webkit-transition-property  left      transition-property  left      -moz-transition-duration  0 1s      -o-transition-duration  0 1s      -webkit-transition-duration  0 1s      transition-duration  0 1s     fragment not  active        left  540px      fragment active       left  0px      Main page HTML    lt div class  fragmentWrapper  data-ng-view data-ng-controller  HomeFragmentController  gt   lt  div gt    Partials HTML example    lt div id  part1  class  fragment   transitionState    gt   lt  div gt

User · Answer

1 Install angular-animate  2 Add the animation effect to the class ng-enter for page entering animation and the class ng-leave for page exiting animation  for reference  this page has a free resource on angular view transition https   e21code herokuapp com angularjs-page-transition

[javascript] AngularJS - Animate ng-view transitions

Examples related to javascript

Examples related to angularjs

Examples related to animation

Examples related to url-routing