변수가있는 div에 애니메이션 클래스를 추가했습니다.
<div class="{{ItemsChange}}"></div>
내 컨트롤러에서 :
$scope.addItem=function(item){
$rootScope.ItemsChange=''
$rootScope.ItemsChange='animated pulse'
}
이제 addItem이 호출 될 때마다이 클래스를 적용하고 싶습니다. 이것이 바로 변수에 빈 문자열을 먼저 추가 한 다음 애니메이션 클래스를 추가하여 $ scope.addItem이 호출 될 때마다 애니메이션 클래스 'animated pulse'가 적용되도록하는 이유입니다. 애니메이션 클래스는 처음에만 적용됩니다.
이 문제를 어떻게 해결합니까?
죄송합니다. animate.css가 Angular 애니메이션에 최적화되었다고 가정했지만 그렇지 않습니다. 현재 상태로 작업하려면 $ timeout 내에서 $ scope.ItemsChagne를 재설정하면됩니다. 따라서 $ timeout을 컨트롤러에 대한 종속성으로 추가하고
$scope.addItem = function(item) {
$scope.ItemsChange = 'animated pulse';
/**
* each animation inside animate.css is one second,
* so give it an extra few milliseconds
*/
$timeout(function() {
$scope.ItemsChange = false;
}, 1100);
});
특히 예쁘지는 않지만 작동합니다.
편집하다
대신 ngClass를 다음과 같이 사용해보십시오.
ng-class="{animated: ItemsChange, pulse: ItemsChange}"
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다