bazı öğeler için nganimate'i devre dışı bırak

Ben ngAnimate modülü kullanıyorum, ancak tüm benim ng-if, ng-showvb, bu etkilenir, bazı seçilmiş elemanlar için kaldıraç ngAnimate istiyorum. Performans ve çok hızlı gösteren ve gizlenen öğelerdeki bazı hatalar için.

Teşekkürler.

Sadece bunu CSS'nize ekleyin. Son kural olması en iyisidir:

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

ardından no-animatedevre dışı bırakmak istediğiniz öğe sınıfına ekleyin . Misal:

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

Belirli öğeler için animasyonları etkinleştirmek istiyorsanız (belirli öğeler için devre dışı bırakmanın aksine ), canlandırmak için belirli bir sınıf adına (veya regex) sahip öğeleri yapılandırmak için $ animateProvider'ı kullanabilirsiniz .

Aşağıdaki kod, angular-animatesınıfa sahip öğeler için animasyonları etkinleştirecektir :

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

angular-animateAnimasyonları etkinleştirmek için sınıfı içeren örnek işaretleme :

<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 örneği , yalnızca ilk filtrenin animasyonlara sahip olduğu bu blogdan ödünç alınmış ve değiştirilmiştir ( angular-animatesınıfa sahip olduğu için ).

Lütfen angular-animateörnek olarak kullandığımı ve .classNameFilterişlev kullanılarak tamamen yapılandırılabileceğini unutmayın .

Modülünüze bağımlı olarak ngAnimate modülüne sahipseniz, AngularJS'de animasyonları dağıtmanın iki yolu vardır:

1. $ Animate hizmetinde animasyonu genel olarak devre dışı bırakın veya etkinleştirin:

   $animate.enabled(false);
   

2. Belirli bir öğe için animasyonları devre dışı bırakın - bu, bu açısal öğe olmalıdır, animationstate css sınıflarını ekler (örneğin ng-enter, ...)!

   $animate.enabled(false, theElement);
   

Angular 1.4 sürümünden itibaren argümanları tersine çevirmelisiniz:

$animate.enabled(theElement, false);

İçin belgeler$animate .

Angular animate paradigmasını izleyen bir CSS sınıfı kullanarak belirli öğeler için ng-animate'i devre dışı bırakmak için, normal ifadeyi kullanarak sınıfı test etmek için ng-animate'i yapılandırabilirsiniz.

Yapılandırma

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

Kullanım

ng-animate-disabledSınıfı, ng-animate ile yok sayılmasını istediğiniz öğelere eklemeniz yeterlidir .

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

teşekkürler, elemente yerleştirebileceğiniz bir yönerge yazdım

CoffeeScript:

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

JavaScript:

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

Bunun veya $animate.enabled(false, $element);kullanan öğeler için işe yarayacağını buldum, ancak herhangi bir nedenle kullanılan öğeler için işe yaramayacak ! Sonunda kullandığım çözüm, hepsini GitHub'daki bu iş parçacığından öğrendiğim CSS'de yapmaktı .ng-showng-hideng-if

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

Ben do DEĞİL benim üzerinde ngAnimate kullanmak istiyorum ng-ifbu benim çözüm olurdu böylece, 's:

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

Bunu başka bir öneri olarak gönderiyorum!

liİlkinin kullanılarak gizlendiği bir listem var ng-hide="$first". Ortadan kaybolmadan önce yarım saniye gösterilen varlıktaki ng-entersonuçları kullanmak li.

Chris Barr'ın çözümüne dayanarak, kodum artık şöyle görünüyor:

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

Bunun gecikmiş bir cevap olduğunu biliyorum, ancak burada MainController'da kullanıyoruz:

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

Ancak sorun şu ki, tüm animasyonları devre dışı bıraktığımızda, ui-select'in yapılandırılması opacity: 0.

Bu nedenle, opaklığı CSS kullanarak 1'e ayarlamak gereklidir:

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

Bu, opaklığı uygun şekilde ayarlayacak ve ui-select çalışacaktır.