AngularJS ng-show 애니메이션 cross-fade in ng-repeat

Question

단순하지만 (나를 위해!) angularjs 애니메이션 문제 표시/숨기기.

나는 높고 낮음을 찾았지만 이에 대한 해결책을 찾지 못했습니다. 특정 문제입니다.이 문제는 예제와 "도전"으로 가장 잘 설명 될 수 있습니다.

첫째, 예 : http://jsfiddle.net/adammontanaro/QErPe/1/

과제 : 사람이 그 이미지가 페이드 인 및 페이드 아웃 할 수 보다는, 현재 표시된 이미지 다음 또는 위 나타나는으로 터지는보다 서로 이상 위 이미지의 div가 숨겨지면 놓으시겠습니까?

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

내가 시간이 내 바퀴를 회전하고있다. 단일 이미지 또는 div를 표시하거나 사라지게하는 방법을 보여주는 좋은 게시물을 보았습니다. 그러나 단순한 크로스 페이드 및 바꾸기를 시도 할 때 모두 손상됩니다. 나는 절대/상대적인 포지셔닝으로 어지럽게하려고 노력했지만 아무 소용이 없다.

스위치로 시도했지만 스위치 조건에서 $ 인덱스를 사용할 수 없어 실행시 이미지를로드 할 수있었습니다. 여기서 큰 요구 사항입니다.

FYI - 이것은 각도를 사용합니다. 1.1.5

감사합니다. Adam

Answer 1

실제로 모든 문제가 발생했습니다. 약간의 CSS가 누락되었습니다.

나는 당신의 jsfiddle을 올바른 위치 (상대적인 위치와 절대적인 위치, 높이의 꼬집음)로 고정 시켰고 그것은 매력처럼 작동한다.

새로운 물건의 대부분은 다음과 같습니다 필요에 따라 HTML에 적용되는 클래스와

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

.

체크를 아웃 : 도움이 http://jsfiddle.net/QErPe/2/

희망!

Answer 2

이것은 각도 문제보다는 CSS 문제가 더 많이있는 것처럼 보입니다. 두 div를 서로 겹쳐 놓고 동시에 같은 공간을 점유하는지 확인해야합니다. 그 후에 cross-fading은 케이크 조각이어야합니다.

Answer 3

.ng-hide 클래스에서 일반 CSS3을 사용할 수도 있습니다. 예를 들면 다음과 같습니다 NG 숨김 클래스를 추가 할 때 이제

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

는, 이미지의 투명도를 사라질 것이다. ngAnimate는 그 위치를 가지고 있지만 .ng-hide 클래스의 간단한 CSS3를 사용하면 좌절감을 없앨 수 있습니다.