ngAnimateSwap Einschränkungen

Question

Ich habe ngAnimateSwap verwendet, um Elemente horizontal, vertikal zu übersetzen. Allerdings sind andere Arten von Animationen unterstützt, wie Opazität (Fade-in und Fade-out?)

Wenn ich das Beispiel ändern, die hier animateSwap erscheint opacity anstelle des top Wert zu verwenden, dann wird die Animation nicht auftritt. Wird das erwartet?

Answer 1

Ich konnte es mit opacity arbeiten. Sie müssen mit dem CSS herumspielen und verstehen, was CSS-Element was macht. Here's a plunkr von animateSwap wird mit einem opacity Übergang verwendet.

Die ursprüngliche CSS ist:

.swap-animation.ng-enter { 
    top:-250px; 
} 
.swap-animation.ng-enter-active { 
    top:0px; 
} 
.swap-animation.ng-leave { 
    top:0px; 
} 
.swap-animation.ng-leave-active { 
    top:250px; 
} 

I geändert, die folgend und ich habe jetzt eine Überblendung funktioniert ganz gut:

.swap-animation.ng-enter { 
    top:0px; 
    opacity:0; 
} 
.swap-animation.ng-enter-active { 
    top:0px; 
    opacity:1; 
} 
.swap-animation.ng-leave { 
    top:0px; 
    opacity:1; 
} 
.swap-animation.ng-leave-active { 
    top:0px; 
    opacity:0; 
}