Page Transition with AngularJS and CSS Animations

Question

I'm working on a basic AngularJS app. This app will have pages that are going to be defined within templates. When a user changes pages, I want to be able to show the other page with a basic animation. Currently, my app is doing this. However, the previous page drops below the new page and sort of flickers. I can't figure out why this is happening. Here is my code:

<!doctype html>
<html lang="en" ng-app="app">
  <head>
    <meta charset="utf-8">
    <title>My HTML File</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.js"></script>        
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-animate.js"></script>  

    <style type="text/css">
      .myAnimation { height:480px; width:640px; overflow:hidden; }
      .myAnimation.ng-enter { animation-duration: .3s; animation-name: fadeIn; animation-timing-function: cubic-bezier(.71,.55,.62,1.57); }
      .myAnimation.ng-leave { animation-duration: .3s; animation-name: fadeOut; animation-timing-function: cubic-bezier(.71,.55,.62,1.57); }

      @keyframes fadeIn {
        from { opacity: 0; transform: scale(.9, .9); }
        to { opacity: 1; transform: scale(1, 1); }
      }

      @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
      }
    </style>    
  </head>

  <body style="margin:0; padding:0;"> 
    <ul style="list-style-type:none; margin:0px; padding:0px;">
      <li style="display:inline;"><a href='#page1'>Page 1</a>&nbsp;&nbsp;</li>
      <li style="display:inline;"><a href='#page2'>Page 2</a>&nbsp;&nbsp;</li>
    </ul>

    <div style="display:block; border:1px solid black;">
      <div ng-view class="myAnimation"></div>
    </div>

    <script type="text/javascript">
      angular.module('app', ['ngRoute', 'ngAnimate']).
        config(['$routeProvider', function($routeProvider) {
      $routeProvider.
        when('/page1', {templateUrl: 'views/page1.html', controller: Page1Ctrl}).
            when('/page2', {templateUrl: 'views/page2.html', controller: Page2Ctrl}).
            otherwise({redirectTo: '/page1'});
      }]);

      function Page1Ctrl($scope, $http) {
      }

      function Page2Ctrl($scope, $http) {
      }
    </script>
  </body>
</html>

How do I prevent the scrollbar from appearing when I change pages? And prevent the older page from dropping below the new page?

Thank you!

You're including ngAnimate in your code, any reason you're not using it? — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Aug 30, 2013 at 12:39
ngAnimate is included in the angular core now. You can use things like <div ng-view ng-animate="... . — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Aug 30, 2013 at 17:49

mattaningram · Accepted Answer · 2013-09-25 15:40:40Z

1

It's likely that you need to give the animated divs a position:absolute; style during the animations.

What is happening is that the second template is being loaded into the DOM while the first template is still doing the fade-out animation. Without position:absolute they do what is natural and start block stacking until the first template has fully faded out and Angular removes it.

Keep in mind if you add position:absolute you may also have to play with the "Top" value to position it correctly depending on which parent element has position:relative or absolute.

You can put the position:absolute class on the animated div generally, or just specifically on the animating classes depending on what works better for your app structure.

answered Sep 25, 2013 at 15:40

mattaningram

3071 gold badge5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rob Over a year ago

I had a similar problem and I could fix it by setting the position to absolute however I have a footer under the ngView so when the position of the view gets set to absolute then footer will overlap it. Why can't I just change the display of the view to inline to make the two views appear beside each other?

Arpp Over a year ago

@rob I just found a solution about this footer issue. You could add the 'position: absolute;' and 'top: 0;' css properties to the '.classname.ng-leave' css class. Thus, only the leaving content is absolutely positioned and the footer is correctly displayed below the entering content (which is not absolutely positioned).

Collectives™ on Stack Overflow

Page Transition with AngularJS and CSS Animations

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related