Angular UI Router: ui-view positioning on state change - angularjs

Question

I am currently developing a heavy angular-driven homepage for an agency. Now I am at the state-change. I added a page transition with a simple fade effect. Now the problem I have is, that the new ui-view that is being added when the state changes is prepended before the first ui-view. Everything alright, but as the first ui-view is fading out the second is already added and the transition looks just crappy. So, I want to have the new ui-view added after the first ui-view.
IMPORTANT: I am using parallax effects, so the solution with a page-container and absolute positioning isn't possible.
This image is showing what I want to have afterwards.

Answer 1

I had faced similar issue, it was because I had animation on both enter and leave.
You dont need animation on both enter and leave.
You can have animation only on leave or only on enter
E.g.
.ng-enter {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
opacity: 0;
}
checkout the easing in animation in this PLUNKER
OR if you want animation in both enter and leave, then add a delay in animation
add delay to your transitions:
.ng-enter{
-webkit-transition: all 2s ease 1s;
-moz-transition: all 2s ease 1s;
-o-transition: all 2s ease 1s;
transition: all 2s ease 1s;
}
.ng-leave {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

Answer 2

Building off of #HarishR's answer:
http://plnkr.co/edit/pzsDd1zPvHgdZe099upi?p=preview
We have 2 transitions:
IN:
.ng-enter {
transition: opacity 1s ease; // autoprefixer
opacity: 0; // start animating
}
.ng-enter-active {
opacity: 1; // end animating
}
OUT:
.ng-exit {
transition: opacity 1s ease; // autoprefixer
opacity: 1; // start animating
}
.ng-exit-active {
opacity: 0; // end animating
}
This will take 1 second to fade in and out the blocks. When there's only 1 block, it fades in immediately over 1 second. What if there are two blocks though (transitioning from one to another?). We can use delays and some nifty css:
// Selector only matches if 2 sibling animating elements exist
.ng-animate + .ng-animate {
// Avoid pushing around DOM
// Property disappears once the first sibling leaves
position:absolute;
// Delay fade-in until first sibling leaves
transition-delay: 1s; // autoprefixer
}
Without this fancy selector, the first time you open a view you'd have a 1s delay before anything happens.