Animate ui.router transitions

Question

I am trying to animate the transitions of the ui router.

To do that I am using animate.css and angular-animate, but I have a problem:

when the transition happens, the exiting view drops down before sliding left (the new view pushes it down).

the less/css code to animate is:

.main_view {
  .transition(all 10s);

  &.ng-enter {
    .view-wrapper {
      .fadeInRight;
    }
  }

  &.ng-leave {
    .view-wrapper {
      .fadeOutLeft;
    }
  }
}

.view-wrapper {
  .transition(all 0.5s ease-out);
  .animated;
}

every view is wrapped with the view-wrapper class like this:

<div class="view-wrapper">
   ... view content ...
</div>

I made a demo with two states in plunker: http://plnkr.co/edit/pweVNMDYb7xTGmNtNE1E?p=preview

How do I prevent the exiting view from dropping down?

Answer 1

When I set

.main_view{
  position: absolute;
  width: 100%;
}

It's working but there's maybe a better solution

EDIT With @ryeballar comment you can put:

.ng-enter{
  position: absolute;
  width: 100%;
}

Works well.