ng-class 기반 ng-animate 전환이 작동하지 않는 이유는 무엇입니까?

Question

이것은 달성하려는 전환을 사용하여 ng-class 애니메이션의 매우 단순화 된 데모입니다.

항목을 선택하면 애니메이션에서 간단한 페이드를 만들려고합니다.

항목을 선택하면 ng-class 지시어를 사용하여 selected 클래스가 추가됩니다. 애니메이션 후크 클래스가 ng-animate으로 추가 된 documentation 다음에 전환을 추가하려고합니다.

아래 코드는 제가 지금까지 가지고있는 코드입니다. 전환 속성과 함께 opacity을 0으로 설정하고 .selected-add-active 클래스가 추가되면 opacity 1로 전환해야합니다. 그러나 작동하지 않습니다.

angular.module('demo', ['ngAnimate']) 
 
    .controller('demoCtrl', function($scope) { 
 
    $scope.selected = false; 
 
    $scope.selectToggle = function() { 
 
     $scope.selected = !$scope.selected; 
 
    }; 
 
    });

.item { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: grey; 
 
} 
 
.item.selected { 
 
    background-color: dodgerblue; 
 
} 
 
.item.selected.selected-add { 
 
    transition: opacity 3s; 
 
    opacity: 0; 
 
} 
 
.item.selected.selected-add.selected-add-active { 
 
    opacity: 1; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.js"></script> 
 
<div ng-app="demo" ng-controller="demoCtrl"> 
 
    <div class="item" ng-class="{selected:selected}"></div> 
 
    <br> 
 
    <br> 
 
    <button ng-click="selectToggle();"> 
 
    {{selected? 'Unselect' : 'Select'}} 
 
    </button> 
 
</div>

왜 내 코드가 작동하지 않습니다?

Answer 1

여기에서 문제는 각도 ng-animate가 CSS 클래스를 적용하는 순서와 브라우저가 DOM 리플 로우를 최적화하는 순서 인 것으로 보입니다.

ng-animate은 실제로 x 클래스를 실제로 추가하기 전에 x-add 클래스를 추가합니다. 이것은 브라우저가 애니메이션의 초기 상태를 감지 할 수 있도록 DOM 리플 로우를 강제 실행 (또는 위장)합니다.

그러나 초기 상태의 CSS (.item.selected.selected-add) 선택자는 아직 추가되지 않은 .selected 클래스로 연결되어 있으므로 일치하지 않으며 브라우저가 브라우저를 무시합니다.

이 다음에 ng-animate은 selected 클래스 다음에 selected-add-active 클래스를 추가합니다. 이 시점에서 초기 상태에 대한 CSS 선택기 일치 않지만, 이러한 변화는 따라서 브라우저에서 실제 변경 이후

.item.selected.selected-add.selected-add-active { 
    opacity: 1; 
} 

지금입니다 가장 높은 특이성과 선택에서 opacity을 적용하기로 선택, 같은 리플 로우에서 발생 요소의 opacity이 감지되면 변환이 수행되지 않습니다.

---

클래스가 전환되면서 ng-animate 추가 애니메이션 클래스 후크 체인 피이 문제를 해결한다. 특히 x-add 클래스는 다음 클래스가 적용되기 전에 브라우저에서 감지해야합니다.

angular.module('demo', ['ngAnimate']) 
 
    .controller('demoCtrl', function($scope) { 
 
    $scope.selected = false; 
 
    $scope.selectToggle = function() { 
 
     $scope.selected = !$scope.selected; 
 
    }; 
 
    });

.item { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: grey; 
 
} 
 
.item.selected { 
 
    background-color: dodgerblue; 
 
} 
 
.item.selected-add { 
 
    transition: opacity 3s; 
 
    opacity: 0; 
 
} 
 
.item.selected-add.selected-add-active { 
 
    opacity: 1; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.js"></script> 
 
<div ng-app="demo" ng-controller="demoCtrl"> 
 
    <div class="item" ng-class="{selected:selected}"></div> 
 
    <br> 
 
    <br> 
 
    <button ng-click="selectToggle();"> 
 
    {{selected? 'Unselect' : 'Select'}} 
 
    </button> 
 
</div>

: 아래

은 작업 예입니다