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

일부 요소에 대해 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 .

---

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

CoffeeScript :

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

자바 스크립트 :

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

---

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/

---

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

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;
  }
}

---

I do NOT want to use ngAnimate on my ng-if's, so this would be my solution:

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

Just posting this as another suggestion!

---

I have a list from which the first li is hidden using ng-hide="$first". Using ng-enter results in the li being shown for half a second before disappearing.

Based on Chris Barr's solution, my code now looks like this:

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. */

---

I know that it is a delayed reply, but here we use in MainController:

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

But the problem is that when we disable all animations, the ui-select are configured to opacity: 0.

So, its necessary to set opacity to 1 using CSS:

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

This will properly set opacity and the ui-select will work.

참고URL : https://stackoverflow.com/questions/21249441/disable-nganimate-for-some-elements