View is not hidden before the transition

[rafaelbrotas]

I have a problem with the transition.

First is displaying a view and then the active view is hidden.

[homerjam]

Hi,

Do you have an example or any code you could show me?

Thanks

Ps. Another repo homerjam/angular-gsapify-router is better maintained now

[Otanikotani]

Hi,

I have the same problem. Here is a link http://plnkr.co/edit/uKskaP7Yepfai6zA6fQy - I tried to use your example here. When you click Page 1 and Page 2 buttons the previous view is moved down but still visible.

I simply added this to styles: .anim-in-out.anim-in-setup { display: none; } and it worked for me, but there must be more elegant solution.

[homerjam]

The solution here is to use absolute positioning on the view element - this is left to the user to configure so that its less opinionated and offers the flexibility to use fixed positioning etc.

[gufigueiredo]

Same problem here. The content is "moved down" before transition.

Otanikotami solution worked for me, but the IN transitions stopped to work.

Here is an updated plunker: http://plnkr.co/edit/9x5QXyR3EieG28IXToyJ?p=preview

Any workarounds?

[homerjam]

Try this:

.anim-in-out.anim-in-setup {
    position: absolute;
}

display: none; will break the transitions, the element must be "visible" for them to work

[gufigueiredo]

Worked like a charm! Very thank you!

[gufigueiredo]

PS: I've tried the new repo (angular-gsapify-router) and the same problem occurs. I don't know if is there any workarounds.

[homerjam]

Just add this line to your css

[ui-view] { position: absolute; }

[mmaask]

Setting position to absolute messes up bootstrap content container.

[homerjam]

I expect you can wrap the container in another element to avoid this problem. Feel free to post an example in plunkr/fiddle/codepen

[mmaask]

That would by my example: http://plnkr.co/edit/JBi9J23fja440E7GoPmR?p=preview

Added [ui-view] { position: absolute; }

[homerjam]

If you add position: relative; to the .content class/element it seems to resolve the problem

[mmaask]

Thanks for the solution, but for some reason some pages are still getting wrapped in containers. Registration page becomes like this when the middle input field is removed: http://plnkr.co/edit/JBi9J23fja440E7GoPmR?p=preview (added relative as html style for the testing purpose here)

[homerjam]

I don't think your problem relates to this issue I'm afraid. You'll find more help on the Twitter bootstrap page or Stack Overflow.