Soru Ng-show / ng-hide'da gerçekleşen Angular Animation'ı durdur


AngularJS uygulamasında, yükleme makaralarım için fontawesome kullanıyorum:

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

Ayrıca, ngAnimate üzerinde bir bağımlılığı olan bildirim iletileri için AngularToaster kullanıyorum. AngularJS uygulamamda ngAnimate'i eklediğimde, yükleyicilerim garip bir şekilde canlandırarak yükleyicileri karıştırıyor. Bunun olmasını durdurmak istiyorum ama sadece bu yükleyicilerdeki animasyonu devre dışı bırakmanın bir yolunu bulamıyorum (aynı zamanda benim uygulamamdaki her yükleyiciyi güncellemek zorundayım).

Heres benim kesin problemimi gösteren bir plunkr.

http://plnkr.co/edit/wVY5iSpUST52noIA2h5a


44
2017-07-07 18:55


Menşei


Bu cevaba rastladım, fakat tüm yükleyicileri bir "no-animate" direktifle dekore etmemeyi tercih ederim. stackoverflow.com/questions/23879654/... - Chris Lees
Kendi şov yönergelerinizi oluşturmaya ne dersiniz? - lucuma
@lucuma Bundan kaçınabilseydim, tekerleği yeniden icat etmemeyi tercih ederim. Ayrıca bu, tüm yükleyicileri bu yeni ng-show yönergesiyle güncellememi de içerir. Benim ideal çözümüm onu ​​tek bir yerde yapılandırmak ve unutmak olurdu. - Chris Lees
Bu, 1.2'deki otomatik animasyon ile ilgili sorunlardan birini ortaya çıkarır. 1.1'de beyan ettikleri şekilde geri dönmelerini umuyorum. Ne yapacağımı onlara özel olarak söylemediğim sürece, açısal elementleri canlı hale getirmeyi düşünmüyorum. - Jason Goemaat
@JasonGoemaat, çünkü Açısal modüler bir şey değil, bir sorun değil, sadece değişikliklere ayak uydurmak. Ben sadece ne olduğunu animasyon üzerinde kontrol çok verir classNameFilter hakkında araştırdı kadar bilmiyordum. - lucuma


Cevaplar:


Bunu yapmanın en iyi yolunun $animateProvider.classNameFilter öğeleri animasyonlu hale getirmenize veya bu durumda animasyon vermemeye olanak tanır. Gibi bir şey yapacağız:

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

Demo:

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

Açısal docs belirtmek, bildirmek:

İşaretli CSS sınıfı düzenli ifadesini ayarlar ve / veya döndürür   bir animasyon gerçekleştirirken. Bootstrap üzerine classNameFilter değeri   hiç ayarlanmamış ve bu nedenle $ animate'i denemeyi başlatacak   herhangi bir öğe üzerinde bir animasyon gerçekleştirin. ClassNameFilter öğesini ayarlarken   değer, animasyonlar sadece başarıyla başarılı olan öğeler üzerinde gerçekleştirilecektir   filtre ifadesini eşleştir. Bu da karşılığında performansı artırabilir   düşük güçlü cihazlar yanı sıra çok içeren uygulamalar   yapısal işlemler.

İle yorum başına başka bir cevap olarak no-animate yönerge yazabilirsin ng-show Daha yüksek bir öncelikte çalışacak ve animasyonu devre dışı bırakacak yönergedir. Bunu sadece elemanın sahip olması durumunda yapacağız fa-spinner sınıf.

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

        }
      }
    }
  });

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

Son olarak, yukarıdakilere benzer şekilde, no-animate Direktifi biraz daha modüler yapmak istiyorsak. Bu durumda yönergeyi isimlendiriyorum faSpin Yukarıdaki cevapta yapabileceğiniz Bu esas olarak aynıdır, sadece yukarıdaki kodun yorumunda belirtilen SO cevabından gelen yönergeyi koruyoruz. Sadece umurunda olursan fa-spin Bu şekilde adlandırılan animasyon sorunları iyi çalışır, ancak başkalarınız varsa ng-show animasyon problemleri isim vermek istersiniz ngShow ve if cümlesine ekleyin.

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

        }
      }
    }
  });

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


59
2017-07-08 13:25



EVET!!! Bu mükemmel teşekkürler @lucuma! - Chris Lees
Sorun değil. Meraktan hangi çözümü kullanacaksın? - lucuma
Kesinlikle $ animateProvider çözümü. Tek bir yerde yapabilirim ve tüm uygulamamı etkileyebilirim. Yine de çoklu çözümler sağladığınız için çok teşekkürler. AngularJS'de hiç düşünmediğim birkaç farklı yeri anlamama yardımcı oluyor. - Chris Lees
Çözüm için teşekkürler. Fa-spinner fa-spin instad ile $ animateProvider kullandım - qmo
Yaşamayan direktifinizi anlamıyorum: Ne için bakıyorsunuz? Scope.watch'ın ilk parametresindeki işlev saat değerini döndürmeli, evet? - westor


Animasyon bittiğinde, $ kapsam değişkeninin kapatılmasından sonra bile simgemin dönmeye devam edeceği benzer bir sorun yaşadım. Benim için işe yarayan şey sarmaktı. <i> Bir yayında fa simge öğesi.

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

Dene!


37
2017-10-27 04:07



Basit ve kolay ... Sadece bir <span> öğesinin animasyonunu yapın ve varsa ng'yi uygulayın. - u_b
Gizlemek / göstermek istediğiniz öğenin etrafına basit bir açıklık yerleştirmek için JS eklemeyi neden zahmetsiz yapıyorsunuz? Sanırım bu kesinlikle açısal olarak elde etmeye çalıştığı şey. - RobertoNovelo
Bu kabul edilen cevap olmalı. - jbmilgrom
Bu kabul edilen cevap olmalıdır - bir direktif veya başka bir JavaScript kodu kullanmanıza gerek yoktur. Basit ve etkili - kotpal
Bu kabul edilen cevap olmalı. - Sh4m


Daha kolay bir yol buldum.

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

Çatallı plunker: http://plnkr.co/edit/mCsw5wBL1bsLYB7dCtQF

Bunu yapmanın bir sonucu olarak başka bir küçük soruna girdim, çünkü simgesinin 2 saniyeden fazla bir süre boyunca döndüğü, ancak 'ng-hide-add-active' sınıfının neden olduğu bir durum ortaya çıktıysa, ben sadece css'ye eklendi:

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

ve bu onunla ilgileniyordu.

DÜZENLEME: Nico'nun çözümü bunun biraz daha temiz bir versiyonudur, bu yüzden onunkini kullanmayı düşünürdüm.


17
2018-04-20 19:13



Bu css benim için bir çekicilik gibi çalıştı. Bu gerçekten sorun için en iyi düzeltme. - parliament
Bu harika, ama sorun şu ki, yükleyici elemanlarınızın her birine ng sınıfı yönergesi eklemeniz gerekecek. Sorunu düzeltir, ancak uygulamanız boyunca çok sayıda iplikçiniz varsa, hepsini güncellemek karışıklık yaratabilir. - Chris Lees
@ChrisLees true - Bunu düşünmedim bile, ama bunun sebebini kapsüle çeviren bir spinner direktifini yarattık ve sonra her yerde bir spinner kullandık. Dürüst olmak gerekirse, nicotr014'ün cevabını artık daha iyi seviyorum - gerçekten bu cevabın bir dönüşü. - James Fiala
@JamesFiala Ben her yerde kullanmak için bir spinner direktif oluşturma fikri hoşuma gidiyor. Değişken isimlerle tutarlı kalmak, sahip olmak için oldukça kullanışlı olabilir. - Chris Lees
@ChrisLees ng sınıfını güncellemeniz gerekmez. Bunun yerine, sahip olabilirsiniz fa-spin sınıfın yerine sınıf-içi. <i class="fa fa-spinner fa-spin" ng-show="loading"> - Fizer Khan


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

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

  });

Sonra sadece dersi ekleyebilirsiniz ng-animate-disabled İstediğiniz herhangi bir öğeye.

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


3
2017-10-17 00:07





Güncelleniyor James Fiala Cevap.

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

İhtiyacın yok ng-class belirtildiği gibi @James Fiala  Cevap. Ama sahip olmalısın fa-spin sınıfın biri olarak.

Stil ekle

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

0
2018-02-05 13:53