AngularJS ng-show animacja cross-fade wewnątrz ng-repeat

Question

Prosty (ale nie dla mnie!) Angularjs pokaż/ukryj problem z animacją.

Szukałem wysokiego i niskiego, ale nie znalazłem rozwiązania tego problemu specyficznego, który może być najlepiej wyjaśniony na przykładzie i "wyzwaniem".

pierwsze, przykład: http://jsfiddle.net/adammontanaro/QErPe/1/

Wyzwanie: może ktoś zrobić te zdjęcia znikną i obecnie nad siebie, zamiast pojawiać poniżej lub powyżej aktualnie pokazany obraz, następnie pojawiały się umieść, gdy element div obrazu jest ukryty?

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; 
} 

I zostały przędzenia moich kół na to godzinami. Widziałem mnóstwo dobrych postów demonstrujących, jak zrobić pojedynczy obraz lub div, które pojawiają się lub znikają, ale wszystko zepsuje się, gdy próbuję prostego przejścia i przejścia. Próbowałem robić zamieszanie z absolutnym/względnym pozycjonowaniem, ale bezskutecznie.

Próbowałem tego za pomocą przełącznika, ale nie mogłem użyć indeksu $ w stanie przełącznika, więc mogłem załadować moje obrazy w czasie wykonywania. To duży wymóg tutaj.

FYI - to jest za pomocą kątowej 1.1.5

Dziękuję !!! Adam

Answer 1

Rzeczywiście wszystko jest w porządku! Po prostu brakuje ci trochę CSS.

Naprawiłem twoje jsfiddle z właściwymi rzeczami (kreska pozycji względnej i absolutnej oraz szczypta wzrostu) i działa jak czar.

Większość nowych rzeczy jest:

.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; 
} 

Z klas stosowanych w HTML, ile potrzeba.

Sprawdź: http://jsfiddle.net/QErPe/2/

nadzieję, że pomoże!

Answer 2

To wydaje się być bardziej problemem CSS niż problemem kątowym. Musisz ustawić dwa elementy div na sobie i upewnić się, że zajmują one w tym samym czasie tę samą przestrzeń. Po tym przejściu krzyżowym powinno być bułka z masłem.

Answer 3

Możesz również zrobić zwykły CSS3 na klasie .ng-hide. Na przykład:

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; 
} 

Teraz, po dodaniu klasy ng-hide, utraci przezroczystość obrazu. ngAnimate ma swoje miejsce, ale dzięki prostemu CSS3 na klasie .ng-hide możesz wyeliminować frustracje.