Soru AngularJS animasyonu tamamlandıktan sonra kod çalıştırma


Görünürlüğü tarafından değiştirilen bir öğem var. ng-show. Ayrıca CSS animasyonlarını - ng-animate'ten otomatik olanları - bu öğenin girişini canlandırmak için kullanıyorum.

Öğe bir görüntü veya bir video içerecektir.

Öğenin bir video içermesi durumunda, onu oynatmak istiyorum, ancak videoyu oynatmayı bitirene kadar oynatmak istemiyorum.

Bu nedenle, bir geri çağırma işlemini sona erdirmenin kolay bir yolu olup olmadığını merak ediyordum. CSS AngularJS içinde animasyon?

docs referans a doneCallbackama bunu belirtmenin bir yolunu göremiyorum ...

Bir geçici çözüm (?) Düşündüm $watching element.hasClass("ng-hide-add-active") ve onunla ateş etmesini bekliyorum (true, false)sadece kaldırılmış olduğunu ima ediyor ..

Güzel bir yolu var mı?


25
2018-01-04 13:28


Menşei


css animasyonlarında saniye miktarını belirtirseniz, aynı tutarı $ timeout olarak ayarlarsınız? - YOU
@YOU: Yapabilirim ama bu benim düşüncemde daha az düzgün - ikisi birbirinden tamamen ayrıldı. - Ed Hinchliffe
btw, css animasyonu geri bildirimleriyle ilgili bir soru var - stackoverflow.com/q/6186454 , stackoverflow.com/q/9255279 , stackoverflow.com/q/2087510 - YOU
Teşekkürler ama bu soru genel css animasyonlardan daha çok angularjs hakkında. - Ed Hinchliffe
Nu-show yerine kendi direktifinizi kullanırsınız. Ya da zaten bir tane varsa, animasyonunuz için de kullanın ve ng-show'u kaldırın. - a better oliver


Cevaplar:


@ michael-charemza cevabı benim için harika çalıştı. Eğer Açısal 1.3 kullanıyorsanız, sözünü biraz değiştirdiler. Bu konuda biraz takıldım ama işte işe yarayan değişiklik:

if (show) {
  $animate.removeClass(element, 'ng-hide').then(scope.afterShow);
}
if (!show) {
  $animate.addClass(element, 'ng-hide').then(scope.afterHide);
}

Plunker: Kod Örneği


26
2017-10-30 14:53





@ZeroflagL'ın önerdiği gibi, değiştirilecek özel bir yönerge ngShow Muhtemelen gitmek için yoldur. Kullanabilirsiniz & geri bildirimleri, animasyonlar bittikten sonra çağrılabilen yönergelere iletmek için. Tutarlılık için, animasyonlar ekleyerek ve kaldırarak yapılır ng-hide her zamanki ngShow yönergesi tarafından kullanılan aynı yöntem olan sınıf:

app.directive('myShow', function($animate) {
  return {
    scope: {
      'myShow': '=',
      'afterShow': '&',
      'afterHide': '&'
    },
    link: function(scope, element) {
      scope.$watch('myShow', function(show, oldShow) {
        if (show) {
          $animate.removeClass(element, 'ng-hide', scope.afterShow);
        }
        if (!show) {
          $animate.addClass(element, 'ng-hide', scope.afterHide);
        }
      });
    }
  }
})

Bunun bir kapsam değişkenine dinlenmesinin örnek kullanımı show olabilir:

<div my-show="show" after-hide="afterHide()" after-show="afterShow()">...</div>

Bu, ng-hide sınıfının eklenmesi / kaldırılması olduğundan, animasyon ile ilgili noktalar. ngShow hakkında dokümanlar hala geçerli ve eklemeniz gerekiyor display: block !important CSS'ye.

Yapabilirsin Bu Plunker'da bu eylemin bir örneğini görmek.


26
2018-01-04 22:01



Ben Plunker ile bu etrafında etrafında ve harika çalışıyor - ancak açı 1.3 sürümüne değiştirirseniz, geri çağrı artık kovulmaz. AddClass ve removeClass işlevlerinin artık bir geri çağrı almıyor gibi görünüyor? - L. Desjardins
Nevermind, kullanmanız gerektiği gibi görünüyor. .En (function () {}); 1.3 sürümü için - L. Desjardins
Ayrıca, css animasyonlarını kullanacaksanız, eklediğinizden emin olun. {tempClasses: 'ng-hide-animate'} sonra üçüncü argüman olarak element ve 'ng-hide' aramadan önce .then Yukarıdaki yorumda belirtildiği gibi. - Matt Waldron


@ michal-charemza çözümü harika çalışıyor, ancak yönerge izole bir alan yaratıyor, bu yüzden bazı durumlarda varsayılan ng-show yönergesi için doğrudan yer değiştirilemez.

Biraz değiştirdim, böylece yeni bir kapsam oluşturmaz ve ng-show yönergesiyle birbirinin yerine kullanılabilir.

app.directive('myShow', function($animate) {
  return {
    link: function(scope, element, attrs) {
      scope.$watch(attrs['myShow'], function(show, oldShow) {
        if (show) {
          $animate.removeClass(element, 'ng-hide').then(function(){
            scope.$apply(attrs['myAfterShow']);
          });
        } else {
          $animate.addClass(element, 'ng-hide').then(function(){
            scope.$apply(attrs['myAfterHide']);
          });
        }
      });
    }
  }
})

Kullanımı:

<div my-show="show" my-after-hide="afterHide()" my-after-show="afterShow()">...</div>

Plunker


0
2018-01-16 07:32