ng-show/ng-hide에서 Angular 애니메이션 발생 방지

ng-show/ng-hide에서 Angular 애니메이션 발생 방지

나의 앵귤러JS 어플리케이션 로드 스피너에 폰타썸을 사용하고 있습니다.

<i class="fa fa-spin fa-spinner" ng-show="loading"></i>

ngAnimate에 의존하는 알림 메시지에도 AngularToaster를 사용하고 있습니다.Angular에 ngAnimate를 포함하면JS 어플리케이션에서는 로딩 스피너에 이상한 애니메이션을 가하여 흐트러뜨립니다.나는 이것을 멈추고 싶지만, 이러한 로더에서만 애니메이션을 비활성화하는 방법을 찾을 수 없다(앱에 있는 모든 로더를 업데이트해야 하는 것도 귀찮다).

여기 내 문제를 보여주는 플렁커가 있다.

http://plnkr.co/edit/wVY5iSpUST52noIA2h5a

것이 합니다.$animateProvider.classNameFilter그러면 애니메이션을 수행할 항목 또는 이 경우 애니메이션을 수행하지 않을 항목을 필터링할 수 있습니다.하다

 $animateProvider.classNameFilter(/^((?!(fa-spinner)).)*$/);
 //$animateProvider.classNameFilter(/^((?!(fa-spinner|class2|class3)).)*$/);

데모:

http://plnkr.co/edit/lbqviQ87MQoZWeXplax1?p=preview

각도 문서 상태:

애니메이션을 실행할 때 체크되는 CSS 클래스의 정규 표현을 설정 또는 반환합니다.부트스트랩 시 classNameFilter 값은 전혀 설정되지 않으므로 $animate는 임의의 요소에 애니메이션을 실행하려고 시도합니다.classNameFilter 값을 설정할 때 애니메이션은 필터 식과 정상적으로 일치하는 요소에서만 수행됩니다.이것에 의해, 저전력 디바이스나 구조 조작이 많은 애플리케이션의 퍼포먼스가 향상됩니다.

또 으로 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」no-animate디렉티브를 하면, 「Directive를 할 수 .ng-show더 높은 우선순위로 실행되고 애니메이션을 비활성화합니다.할 수 가 이, 음, 음, 음, 음, 음, we, we, we, we, we, we, we, we, we, we, we, we, we, we, we, we, we, has, has, hasfa-spinner

  problemApp.directive('ngShow', function($compile, $animate) {
    return {
      priority: 1000,
      link: function(scope, element, attrs) {

        if (element.hasClass('fa-spinner')) {
          // we could add no-animate and $compile per 
          // http://stackoverflow.com/questions/23879654/angularjs-exclude-certain-elements-from-animations?rq=1
          // or we can just include that no-animate directive's code here
          $animate.enabled(false, element)
          scope.$watch(function() {
            $animate.enabled(false, element)
          })

        }
      }
    }
  });

데모: http://plnkr.co/edit/BYrhEompZAF5RKxU7ifJ?p=preview

위와 로 ''를 할 수 .no-animate이치노 있습니다.faSpin위의 답변에서 할 수 있습니다.이는 기본적으로 상기 코드셋의 코멘트에서 언급된 SO 답변의 지시를 유지하는 것과 같습니다.「 」만 쓰는 는, 「 」fa-spin에서는 이런 을 붙이는 것도 이름이 ,ng-show 문제 붙이고 문제ngShowif 구에 추가합니다.

  problemApp.directive('noAnimate', ['$animate',
    function($animate) {
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          $animate.enabled(false, element)
          scope.$watch(function() {
            $animate.enabled(false, element)
          })
        }
      };
    }
  ])

  problemApp.directive('faSpin', function($compile, $animate) {
    return {
      priority: 1000,
      link: function(scope, element, attrs) {

        if (element.hasClass('fa-spinner')) {
          element.attr('no-animate', true);
          $compile(element)(scope);

        }
      }
    }
  });

데모: http://plnkr.co/edit/P3R74mUR27QUyxMFcyf4?p=preview

$scope 변수가 꺼진 후에도 애니메이션이 끝날 때까지 아이콘이 계속 회전하는 비슷한 문제가 있었습니다.저에게 효과가 있었던 것은<i>fa-icon 요소(스팬 내).

<span ng-if="loading"><i class="fa fa-refresh fa-spin"></i></span>

해봐!

내가 더 쉬운 방법을 찾아냈어요.

<i class="fa fa-spinner" ng-show="loading" ng-class="{'fa-spin' : loading}"></i>

포크형 플런커: http://plnkr.co/edit/mCsw5wBL1bsLYB7dCtQF

그 결과, 2초 이상 회전하면 아이콘이 어긋나는 작은 문제가 발생했지만, 그것은 'ng-hide-add-active' 클래스가 원인이 되어 css에 추가했습니다.

.fa-spinner.ng-hide-add-active {
    display: none !important;
}

그리고 그게 해결됐죠

편집: Nico의 솔루션은 조금 더 깔끔한 버전이기 때문에 Nico의 솔루션을 사용하는 것을 검토해 보겠습니다.

angular.module('myCoolAppThatIsAwesomeAndGreat')
  .config(function($animateProvider) {

    // ignore animations for any element with class `ng-animate-disabled`
    $animateProvider.classNameFilter(/^((?!(ng-animate-disabled)).)*$/);

  });

그럼 그냥 클래스를 추가하면 됩니다.ng-animate-disabled원하는 요소를 선택할 수 있습니다.

<button><i class="fa fa-spinner ng-animate-disabled" ng-show="somethingTrue"></i></button>

제임스 피알라 답변 업데이트 중.

<i class="fa fa-spinner fa-spin" ng-show="loading"></i>

필요 없어요.ng-class@James Fiala Answer에서 설명한 바와 같이.하지만 당신은fa-spin수업의 한 사람으로서.

스타일 추가

.fa-spinner.ng-hide-add-active {
   display: none !important;
}

언급URL : https://stackoverflow.com/questions/24617821/stop-angular-animation-from-happening-on-ng-show-ng-hide