Angular 뒤에 코드JS애니메이션이완료되었습니다.

Angular 뒤에 코드JS애니메이션이완료되었습니다.

가시거리가 다음과 같이 전환되는 요소가 있습니다.ng-show. 저는 또한 이 요소에 ng-애니메이션의 자동 애니메이션인 CSS 애니메이션을 사용하여 그것의 엔트리를 애니메이션화하고 있습니다.

요소에는 이미지 또는 비디오가 포함됩니다.

요소에 동영상이 포함되어 있는 경우에는 재생하고 싶지만, 애니메이션이 완료되기 전까지는 동영상을 재생하고 싶지 않습니다.

그렇기 때문에 AngularJS에서 CSS 애니메이션의 끝에 콜백을 묶는 쉬운 방법이 없을까 생각했습니다.

문서는 a를 참조합니다.doneCallback, 특정할 방법이 없네요

하나의 해결 방법(?)생각해 본 것은$watchingelement.hasClass("ng-hide-add-active")그리고 그것이 발사되기를 기다리고 있습니다.(true, false), 이제 막 제거됐음을 암시하는..

더 좋은 방법이 있습니까?

@michael-charemza의 답변은 저에게 아주 효과적이었습니다.Angular 1.3을 사용하는 경우 약속을 조금 변경했습니다.저는 잠시 이 일에 매달렸지만, 여기에 그것이 작동하도록 한 변화가 있습니다.

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

플렁커: 코드 예제

@zeroflagL이 제안한 대로 대체할 사용자 지정 지침ngShow아마 가야 할 길일 겁니다사용가능&지시에 콜백을 전달합니다. 애니메이션이 완료된 후 호출할 수 있습니다.일관성을 위해 애니메이션은 다음을 추가하고 제거함으로써 수행됩니다.ng-hideclass, 이는 일반적인 ngShow 명령에서 사용되는 것과 동일한 메서드입니다.

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

범위 변수 듣기의 예show다음과 같습니다.

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

ng-hide 클래스를 추가/제거하는 것이기 때문에 ngShow에 대한 문서에서 애니메이션을 만드는 것에 대한 포인트는 여전히 유효하며, 추가해야 합니다.display: block !importantCSS로.

이 Plunker에서 실행 중인 예를 볼 수 있습니다.

@michal-charemza 솔루션은 잘 작동하지만 명령어는 분리된 범위를 생성하므로 기본 ng-show 명령어를 직접 대체할 수 없는 경우도 있습니다.

새로운 스코프가 생성되지 않고 ng-show 명령어와 상호 교환하여 사용할 수 있도록 조금 수정했습니다.

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']);
          });
        }
      });
    }
  }
})

용도:

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

플렁커

언급URL : https://stackoverflow.com/questions/20921622/running-code-after-an-angularjs-animation-has-completed