ng-class를 사용하여 클래스를 변경할 때 ng-show에 앵귤러 애니메이션이 작동하지 않음

Question

ng-show 및 애니메이션을 사용하여 정렬되지 않은 목록에 포함 된 일부 개체에 대한 슬라이더를 만들려고합니다. 물체가 한 방향으로 미끄러지는데 잘 작동합니다.

그러나 사용자가 ng-class를 사용하여 클래스를 변경하면 왼쪽 또는 오른쪽으로 오브젝트를 슬라이드 할 수있게하여 애니메이션이 더 이상 작동하지 않게 할 수 있습니다.

왼쪽/오른쪽 케이스의 HTML은 :

<div class="slide-holder"> 
    <ul class="slide-list"> 
    <li class="slide-object" ng-show="directionElement == 0" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}"> 
     Hello There 1! How are you?</li> 
    <li class="slide-object" ng-show="directionElement == 1" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}"> 
     Hello There 2! How are you?</li> 
    <li class="slide-object" ng-show="directionElement == 2" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}"> 
     Hello There 3! How are you?</li> 
    <li class="slide-object" ng-show="directionElement == 3" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}"> 
     Hello There 4! How are you?</li> 
    </ul> 
</div> 

방향을 변경하기위한 제어 장치의 기능은 다음과 같다

.slide-object-left.ng-hide-add, 
.slide-object-left.ng-hide-remove { 
    -webkit-transition:0.5s linear all; 
    -moz-transition:0.5s linear all; 
    -o-transition:0.5s linear all; 
    transition:0.5s linear all; 

    position:absolute; 
} 

.slide-object-left.ng-hide-add { 
    left:100%; 
} 

.slide-object-left.ng-hide-remove, 
.slide-object-left.ng-hide-add.ng-hide-add-active { 
    left:0; 
} 

.slide-object-left.ng-hide-remove.ng-hide-remove-active { 
    left:-100%; 
} 

:

$scope.left = function() { 
    $scope.direction === 'left' 
    if($scope.directionElement > 0) 
    $scope.directionElement = $scope.directionElement - 1; 
}; 

$scope.right = function() { 
    $scope.direction === 'right' 
    if($scope.directionElement < 3) 
    $scope.directionElement = $scope.directionElement + 1; 
}; 

트랜지션 CSS는 다음과 같다

두 경우 모두 표시하기 위해 plnkr을 만들었습니다 : http://plnkr.co/edit/sh0uCAPZiCne4Y5ynFQ2?p=preview

EDIT 1 : 나는 Theoretisch의 답변에 따라 오작동으로 방향 전환을 일으키는 컨트롤러에서 '==='실수를 수정하기 위해 plnkr을 업데이트했습니다. 그러나 주류 문제와 애니메이션 문제는 여전히 남아 있습니다. 다음은 업데이트 plnkr입니다. http://plnkr.co/edit/lv1BBFjRoOmenTv7IBeC?p=preview

Answer 1

애니메이션이 작동하지 않는 이유는 컨트롤러의 기능에 ===이 있기 때문입니다.

=== 대신 =을 사용해야합니다. $scope.direction과 문자열을 비교하고 싶지 않을 것입니다.

$scope.left = function() { 
    $scope.direction = 'left' 
    if($scope.directionElement > 0) 
    $scope.directionElement = $scope.directionElement - 1; 
}; 

$scope.right = function() { 
    $scope.direction = 'right' 
    if($scope.directionElement < 3) 
    $scope.directionElement = $scope.directionElement + 1; 
}; 

이제 애니메이션이 다시 작동합니다. 하지만 올바른 애니메이션을 원한다면 할 일이 더 있습니다. 예 : 귀하의 CSS를 변경하는 것입니다. 애니메이션 속도를 느리게하면 slide-object이 애니메이션으로 표시됨을 알 수 있습니다.

만이 그것을 수정 변경 :

.slide-object-left.ng-hide-add { 
    right:-100%; 
} 

.slide-object-left.ng-hide-remove, 
.slide-object-left.ng-hide-add.ng-hide-add-active { 
    right:0; 
} 

.slide-object-left.ng-hide-remove.ng-hide-remove-active { 
    right:100%; 
} 

.slide-object-right.ng-hide-add { 
    left:-100%; 
} 

.slide-object-right.ng-hide-remove, 
.slide-object-right.ng-hide-add.ng-hide-add-active { 
    left:0%; 
} 

.slide-object-right.ng-hide-remove.ng-hide-remove-active { 
    left:100%; 
} 

내가 left에 right을 전환하고 추가 대수 기호를 변경했습니다. 내 변경 사항이있는 plunk를 찾을 수 있습니다 HERE.

편집 : 왜 애니메이션이 버그인지 잘 모르겠습니다. 나는 그것이라고 생각한다 ng-class. 삭제하고 ng-show을 수정했습니다. 편집 된 Plunk HERE을 볼 수 있습니다. 그것은 최선의 해결책은 아니지만, 지금 당신의 문제를 해결하고 싶습니다. (어쩌면 당신은 THIS 피들로 그것을 향상시킬 수 있습니다)