Question

我用

淡出图像

<img ng-show="visible" src="">

$scope.visible = toggle;

img { -webkit-transition: all 1s; opacity: 1; }
img.ng-hide-add { display:inline !important; }
img.ng-hide { opacity: 0;}

但是我希望在淡出完成时触发回调。我知道在jQuery中你可以做$(foo).on("animationEnd", func);但我宁愿通过AngularJS严格执行此操作。

我做了一个plu here（仅限webkit）。

Answer 1

遗憾的是，这并不像你希望的那么容易。无法将动画结束回调传递给ng-show，因此您必须实施自己的show / hide指令并使用$animate服务。

我forked your plunker来演示。

这是我的指示：

app.directive("myShow", function($animate){
  return {
    scope:{
      // use & so that this will evaluate expressions.
      toggle: "&myShow"
    },
    link: function( scope, element, attrs ){

      // watch the toggle function
      scope.$watch(scope.toggle, function(newVal, oldVal){

        if(newVal && oldVal != undefined){
          $animate.removeClass(element, 'ng-hide', function(){
            console.log("finished");
          })
        } 

        else {
          $animate.addClass(element,'ng-hide', function(){
            console.log("finished!");
          })
        }

      });
    }
  }
});

您可以看到使用$animate调用addClass的{{1}}方法，您可以使用完全相同的CSS。直接使用ng-hide服务意味着您可以使用$animate。

PS 这只是为了展示doneCallback，我还没有检查这是否正确初始化 - 您可能需要确保$animate正确开启/关闭当页面加载时。

你如何在AngularJS中获得动画回调？

1 个答案: