일부 요소에 대해 nganimate 사용 안 함

일부 요소에 대해 nganimate 사용 안 함

ngAnimate 모듈을 사용하고 있지만ng-if,ng-show등의 영향을 받기 때문에 선택한 요소에 대해 ngAnimate를 활용하고 싶습니다.퍼포먼스 및 매우 빠르게 표시 및 숨김 요소의 일부 버그를 실현합니다.

감사해요.

(특정 요소에 대해 애니메이션을 디세블로 하는 것이 아니라) 특정 요소에 애니메이션을 이노블로 하는 경우 $animateProvider를 사용하여 애니메이션화할 특정 클래스 이름(또는 regex)을 가진 요소를 설정할 수 있습니다.

아래 코드는 다음과 같은 요소를 가진 애니메이션을 활성화합니다.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>

이 블로그에서 플런커의 예를 빌려 수정한 경우 첫 번째 필터에만 애니메이션이 포함되어 있습니다(이 때문에).angular-animate클래스)

제가 사용하고 있는 것은angular-animate예를 들면, 이 설정은, 를 사용해 완전하게 실시할 수 있습니다..classNameFilter기능.

Angular에서 애니메이션을 배포할 수 있는 두 가지 방법이 있습니다.모듈에 의존하여 ngAnimate 모듈이 있는 경우 JS:

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

   $animate.enabled(false);
   

2. 특정 요소의 애니메이션을 비활성화합니다.이 각도가 애니메이션 상태 css 클래스를 추가하는 요소여야 합니다(예: ng-enter, ...).

   $animate.enabled(false, theElement);
   

---

Angular 1.4 버전에서는 다음 인수를 뒤집어야 합니다.

$animate.enabled(theElement, false);

---

매뉴얼 (용)

특정 요소에 대해 ng-animate를 디세블로 만들려면 Angular animate 패러다임을 따르는 CSS 클래스를 사용하여 regex를 사용하여 클래스를 테스트하도록 ng-animate를 설정할 수 있습니다.

설정

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

사용.

추가만 하면 됩니다.ng-animate-disabledng-animate에 의해 무시되고 싶은 모든 요소에 대해 class를 지정합니다.

---

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

이것을 CSS에 추가해 주세요.이것이 마지막 규칙일 경우 가장 좋습니다.

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

그 후 추가no-animate디세블로 하는 요소의 클래스로 이동합니다.예:

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

고마워요, 당신이 엘리먼트에 넣을 수 있는 지시문을 작성했어요.

Coffee Script:

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

JavaScript:

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

ngAnimate를 사용하고 싶지 않습니다.ng-if 이렇게 하면 되겠네요.

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

다른 제안으로 게시합니다!

li 은닉하고 있습니다.ng-hide="$first".★★★★★★ 。ng-enter과 같습니다.li0.5로 하다

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

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

답변이 늦어진 것은 알지만, 여기서는 메인 컨트롤러에서 사용하고 있습니다.

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

문제는 할 때 가 ui-select로 입니다.opacity: 0.

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

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

그러면 불투명도가 올바르게 설정되고 UI 선택이 작동합니다.

언급URL : https://stackoverflow.com/questions/21249441/disable-nganimate-for-some-elements