AngularJS ng-show Animation Überblendung innerhalb ng-repeat

Question

Einfach (aber nicht für mich!) Angularjs zeigen/verbergen Animationsproblem.

Ich habe hoch und niedrig gesucht, aber nicht die Lösung zu diesem spezifischen Problem gefunden, das vielleicht am besten mit einem Beispiel und einer "Herausforderung" erklärt werden kann.

Zuerst wird das Beispiel: http://jsfiddle.net/adammontanaro/QErPe/1/

Die Herausforderung: jeder kann machen diese Bilder verblassen und aus über einander, anstatt unter oder oben das aktuell angezeigte Bild erscheint, dann tauchen in Ort, sobald das div des oberen Bildes versteckt ist?

Die HTML:

<div> 
    <div data-ng-repeat="k in kitties" > 
     <img ng-src="{{k}}" ng-show="selectedImage==$index" ng-animate="{show:'animate-show', hide:'animate-hide'}" /> 
    </div> 
</div> 

CSS:

.animate-show, .animate-hide { 
    -webkit-transition:all linear 1s; 
    -moz-transition:all linear 1s; 
    -ms-transition:all linear 1s; 
    -o-transition:all linear 1s; 
    transition:all linear 1s; 

} 

.animate-show { 
    opacity:0; 
} 

.animate-show.animate-show-active { 
    opacity:1; 
} 

.animate-hide { 
    opacity:1; 
} 

.animate-hide.animate-hide-active { 
    opacity:0; 
} 

Ich habe meine Räder auf diese stundenlang zu drehen. Ich habe viele gute Posts gesehen, die zeigen, wie man ein einzelnes Bild oder div erscheinen oder verschwinden lässt, aber alles bricht zusammen, wenn ich versuche, einfach zu überblenden und zu ersetzen. Ich habe versucht, mit absoluter/relativer Positionierung herumzuspielen, aber ohne Erfolg.

Ich versuchte dies mit einem Schalter, konnte aber nicht $ index in der switch-Bedingung verwenden, also konnte ich meine Bilder zur Laufzeit laden. Das ist eine große Anforderung hier.

FYI - dies wird mit Winkel 1.1.5

Thank you !!! Adam

Answer 1

Sie haben tatsächlich alles richtig! Du verpasst nur ein bisschen CSS.

Ich habe dein Problem mit dem richtigen Zeug (eine Prise relative und absolute Position und eine Prise Höhe) und es funktioniert wie ein Zauber.

Der Großteil der neuen Sachen ist:

.container{ 
    position: relative; 
    /* you have to add a height here if your container isn't otherwise set 
     becuse the absolutely positioned image divs won't calculate the height 
     for you */ 
    height: 100px; 
} 
.image-repeat{ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Mit den in der HTML-Anwendung Klassen je nach Bedarf.

Check it out: http://jsfiddle.net/QErPe/2/

Hoffnung, das hilft!

Answer 2

Dies scheint eher ein CSS-Problem als ein eckiges Problem zu sein. Sie müssen die beiden Divs übereinander positionieren und sicherstellen, dass sie gleichzeitig den gleichen Platz einnehmen. Danach sollte die Überblendung ein Stück Kuchen sein.

Answer 3

Sie können auch CSS3 für die Klasse .ng-hide ausführen. Zum Beispiel:

div img { 
    border: medium none; 
    margin: 0; 
    padding: 0; 
    opacity: 1; 
    -webkit-transition: opacity 1s ease 0s; 
    -moz-transition: opacity 1s ease 0s; 
    -o-transition: opacity 1s ease 0s; 
    transition: opacity 1s ease 0s; 
} 
div img.ng-hide { 
    opacity: 0; 
} 

So, jetzt, wenn die ng-hide-Klasse hinzugefügt wird, wird es die Opazität des Bildes verblasst. ngAnimate hat seinen Platz, aber mit einfachem CSS3 für die .ng-hide-Klasse können Sie die Frustrationen beseitigen.