일부 요소에 대해 nganimate 비활성화

나는 ngAnimate 모듈을 사용하고 있지만, 모든 내 ng-if, ng-show등, 그에 의해 영향을받는, 나는 몇 가지 선택 요소를 활용 ngAnimate 싶어요. 매우 빠르게 표시하고 숨기는 요소의 성능 및 일부 버그.

감사.

이것을 CSS에 추가하기 만하면됩니다. 마지막 규칙 인 경우 가장 좋습니다.

.no-animate {
   -webkit-transition: none !important;
   transition: none !important;
}

그런 다음 no-animate비활성화하려는 요소의 클래스에 추가하십시오 . 예:

<div class="no-animate"></div>

특정 요소에 대해 애니메이션을 활성화하려는 경우 (특정 요소에 대해 비활성화하는 것과 반대로) $ animateProvider 를 사용하여 애니메이션 할 특정 클래스 이름 (또는 정규식)으로 요소를 구성 할 수 있습니다 .

아래 코드는 angular-animate클래스 가있는 요소에 대한 애니메이션을 활성화합니다 .

var myApp = angular.module("MyApp", ["ngAnimate"]);
myApp.config(function($animateProvider) {
  $animateProvider.classNameFilter(/angular-animate/);
})

다음은 angular-animate애니메이션을 활성화 하는 클래스를 포함하는 마크 업의 예입니다 .

<div ng-init="items=[1,2,3,4,5,6,7,8,9]">
  <input placeholder="Filter with animations." ng-model="f" /> 
  <div class="my-repeat-animation angular-animate" ng-repeat="item in items | filter:f track by item" >
    {{item}}
  </div>
</div>

첫 번째 필터에만 애니메이션 이있는이 블로그 에서 차용 및 수정 한 Plunker 예제 ( angular-animate클래스가 있기 때문에 ).

내가 사용하고 있습니다 angular-animate예를 들어 그리고 그것은이 완전히 구성 가능한 .classNameFilter기능.

모듈에 대한 종속성으로 ngAnimate 모듈이있는 경우 AngularJS에서 애니메이션을 해제 할 수있는 두 가지 방법이 있습니다.

1. $ animate 서비스에서 전역 적으로 애니메이션을 비활성화하거나 활성화합니다.

   $animate.enabled(false);

2. 특정 요소에 대한 애니메이션을 비활성화합니다.이 요소는 해당 각도에 대한 요소 여야합니다. 그러면 animationstate CSS 클래스 (예 : ng-enter, ...)가 추가됩니다!

   $animate.enabled(false, theElement);

Angular 1.4 버전에서는 인수를 반대로해야합니다.

$animate.enabled(theElement, false);

에 대한 문서$animate .

Angular animate 패러다임을 따르는 CSS 클래스를 사용하여 특정 요소에 대해 ng-animate를 비활성화하려면 regex를 사용하여 클래스를 테스트하도록 ng-animate를 구성 할 수 있습니다.

구성

    var myApp = angular.module("MyApp", ["ngAnimate"]);
    myApp.config(function($animateProvider) {
        $animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/);
    })

용법

ng-animate-disabledng-animate에서 무시할 요소에 클래스를 추가하기 만하면 됩니다.

신용 http://davidchin.me/blog/disable-nganimate-for-selected-elements/

감사합니다. 요소에 배치 할 수있는 지시문을 작성했습니다.

CoffeeScript :

myApp.directive "disableAnimate", ($animate) ->
  (scope, element) ->
    $animate.enabled(false, element)

자바 스크립트 :

myApp.directive("disableAnimate", function ($animate) {
    return function (scope, element) {
        $animate.enabled(false, element);
    };
});

나는 것으로 나타났습니다 $animate.enabled(false, $element);요소가 사용하기위한 의지 작업 ng-show또는 ng-hide했지만 작동하지 않습니다 요소에 사용하는 ng-if몇 가지 이유! 내가 사용한 해결책은 CSS로 모든 작업을 수행하는 것이 었으며 GitHub의이 스레드에서 배웠습니다 .

CSS

/* Use this for transitions */
.disable-animations.ng-enter,
.disable-animations.ng-leave,
.disable-animations.ng-animate {
  -webkit-transition: none !important;
  transition: none !important;
}

/* Use this for keyframe animations */
.disable-animations.ng-animate {
  -webkit-animation: none 0s;
  animation: none 0s;
}

SCSS

.disable-animations {
  // Use this for transitions
  &.ng-enter,
  &.ng-leave,
  &.ng-animate {
    -webkit-transition: none !important;
    transition: none !important;
  }
  // Use this for keyframe animations
  &.ng-animate {
    -webkit-animation: none 0s;
    animation: none 0s;
  }
}

나는 않습니다 NOT 내에서 ngAnimate를 사용하려면 ng-if이 내 해결책이 될 것이다, 그래서의 :

[ng-if] {
  .ng-enter, .ng-leave, .ng-animate {
    -webkit-transition: none !important;
    transition: none !important;
  }
}

다른 제안으로 이것을 게시하십시오!

을 li사용하여 첫 번째 가 숨겨진 목록 이 있습니다 ng-hide="$first". 사라지기 전에 0.5 초 동안 표시되는 ng-enter결과를 사용 합니다 li.

Chris Barr의 솔루션을 기반으로 내 코드는 다음과 같습니다.

HTML

<ol>
    <li ng-repeat="item in items"
        ng-hide="$first"
        ng-class="{'no-animate' : $first}">
    </li>
</ol>

CSS

.no-animate.ng-enter,
.no-animate.ng-leave,
.no-animate.ng-animate {
        transition: none !important; /* disable transitions */
        animation: none 0s !important; /* disable keyframe animations */
}

li.ng-enter {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
li.ng-enter-active {
    opacity: 1;
}

/* I use Autoprefixer. If you don't, please include vendor prefixes. */

지연된 응답이라는 것을 알고 있지만 여기서는 MainController에서 사용합니다.

// disable all animations
$animate.enabled(false);

그러나 문제는 모든 애니메이션을 비활성화하면 ui-select가 opacity: 0.

따라서 CSS를 사용하여 불투명도를 1로 설정해야합니다.

.ui-select-choices {
    opacity: 1 !important;
}

이렇게하면 불투명도가 제대로 설정되고 ui-select가 작동합니다.