eine ui-Router Zustandsänderung Animieren: div erscheint wieder kurz auf, wenn Animation endet

Question

hier ein Plunker des Phänomens: http://plnkr.co/edit/xLfXyDcwKtHPM7Sdhygf?p=preview

das hässliche Layout ignorieren; Das Problem ist offensichtlich, wenn Sie auf "Anmelden" klicken - die FadeOutDown-Animation wird ausgelöst, das div geht pflichtbewusst zum Ende der Seite, aber gerade als die Animation endet, erscheint es kurz an seiner ursprünglichen Position.

Ich bin sehr neu im ganzen Webdev-Spiel, also bin ich mir nicht sicher, ob dieses Problem mit ngAnimate, ui-router oder der Art, wie ich ng-enter/ng-leave im CSS verwende, passiert . Ich würde natürlich gerne für das Div bleiben, wenn es aus dem Blickfeld verschwindet.

Mein Ansatz ist es, einen Übergang über einen ui-sref auszulösen, dann animiert, den Übergang mit dieser Art von CSS

[ui-view].ng-leave #first-div { 
    animation: fadeOutDown 1s; 
} 

Und so weiter für die andere divs. Es funktioniert technisch, hat aber am Ende der Animationsperiode dieses seltsame Artefakt.

Irgendwelche Ideen? Vielen Dank!

Answer 1

können Sie verwenden:

[ui-view].ng-enter, [ui-view].ng-leave { 
    position: absolute; 
    left: 0; 
    right: 0; 
    -webkit-transition:all .5s ease-in-out; 
    -moz-transition:all .5s ease-in-out; 
    -o-transition:all .5s ease-in-out; 
    transition:all .5s ease-in-out; 
} 

[ui-view].ng-enter { 
    opacity: 0; 
    -webkit-transform:scale3d(0.5, 0.5, 0.5); 
    -moz-transform:scale3d(0.5, 0.5, 0.5); 
    transform:scale3d(0.5, 0.5, 0.5); 
} 

[ui-view].ng-enter-active { 
    opacity: 1; 
    -webkit-transform:scale3d(1, 1, 1); 
    -moz-transform:scale3d(1, 1, 1); 
    transform:scale3d(1, 1, 1); 
} 

[ui-view].ng-leave { 
    opacity: 1; 
    /*padding-left: 0px;*/ 
    -webkit-transform:translate3d(0, 0, 0); 
    -moz-transform:translate3d(0, 0, 0); 
    transform:translate3d(0, 0, 0); 
} 

[ui-view].ng-leave-active { 
    opacity: 0; 
    /*padding-left: 100px;*/ 
    -webkit-transform:translate3d(100px, 0, 0); 
    -moz-transform:translate3d(100px, 0, 0); 
    transform:translate3d(100px, 0, 0); 
} 

http://plnkr.co/edit/i9wHL9dNbV55EKZr06dn?p=preview

---

Sie können einfach hinzufügen.

Dokumentation: https://docs.angularjs.org/api/ngAnimate#css-based-animations

[ui-view].ng-leave-active { 
    opacity: 0; 
}