Angularjs ng-show와 작동하지 않는 CSS 애니메이션

Question

ng-repeat를 사용하여 슬라이더에 이미지, 일부 텍스트 및 인덱스 (0-3)가있는 JSON 객체 배열을로드 중입니다. 각 JSON 객체에 해당하는 탐색 버튼을 기반으로 이미지 및 텍스트 표시를 변경하는 함수가 있습니다. 올바른 이미지와 텍스트를 슬라이더에 표시 할 수 있었지만 CSS 애니메이션이 작동하지 않습니다. 누구든지 내 코드에 무슨 문제가 있는지 알고 있습니까? 감사.

모든

  <div class="slide-window" > 

       <div ng-repeat="x in content" class="slide" ng-show="showSlide == {{x.index}}" > 


          <img src="{{x.image}}" /> 
          <div class="slide-copy">{{x.copy}}</div> 


       </div> 



.slide.ng-enter, .slide.ng-leave { 

-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 

} 

.slide.ng-enter { 

position:absolute; 
left:100%; 

} 

.slide.ng-enter.ng-enter-active { 
left:0; 

} 

.slide.ng-leave { 

    position:absolute; 
    left:0; 
} 

.slide.ng-leave-active { 

     left:-100%; 
} 

Answer 1

첫째, 당신의 NG 쇼 표현 showSlide == {{x.index}}는 잘못된 구문입니다. 당신이 대신 원하는 것은 그런 showSlide === x.index

의 ng-enter 및 ng-leave 클래스는 DOM에서 제거 추가 요소를/애니메이션위한 하나 당신은 ng-repeat 내에서 배열을 업데이트하기 때문에, 또는이 ng-if에 의해 수정 되었기 때문에.

ngShow 지시어는 DOM에서 아무 것도 제거하지 않고 단순히 요소를 숨기는 특정 클래스를 추가합니다 (display: none 스타일 지정 사용). https://docs.angularjs.org/api/ng/directive/ngShow