단순하지만 (나를 위해!) angularjs 애니메이션 문제 표시/숨기기.AngularJS ng-show 애니메이션 cross-fade in ng-repeat
나는 높고 낮음을 찾았지만 이에 대한 해결책을 찾지 못했습니다. 특정 문제입니다.이 문제는 예제와 "도전"으로 가장 잘 설명 될 수 있습니다.
첫째, 예 : 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
2 년 후 나는 여전히이 질문과 해결책을 찾고있었습니다. D –