在 Angular 的 ngAnimate 中使用 jQuery 动画

Question

我正在尝试将 jQuery 动画与 angular 的 ngAnimate 模块一起使用。特别是，对于这个例子，jQuery 的fadeIn 和fadeOut。我可以使用 .ng-enter 和 .ng-leave 等来处理 css 转换，但由于某种原因，不是 jQuery。

以下角度代码的淡入不起作用。该元素会立即显示出来。

var app = angular.module('app', ['ngAnimate']);

app.controller('Ctrl', ['$scope',
  function($scope) {
    $scope.data = {};
    $scope.data.toggle = true;
  }
]);

app.animation('.toggle', function() {
  return {
    enter: function(element, done) {
      element.fadeIn(1000, done);
    },
    leave: function(element, done) {
      element.fadeOut(1000, done);
    }
  };
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>

<div ng-app="app" ng-controller="Ctrl">
  <div class="btn btn-primary" ng-click="data.toggle = ! data.toggle">
    Toggle Button
  </div>
  <div class="panel panel-default toggle" ng-if="data.toggle">
    <div class="panel-body">
      Content being toggled
    </div>
  </div>
</div>

但是，当仅使用 jQuery 使用相同的淡入淡出函数时，动画效果很好：

$(function() {
  var container = $('.container');
  var btn = $('.btn');
  var panel = $('.panel');
  var animating = false;

  btn.on('click', function() {
    if (animating)
      return;

    if (panel.is(':visible')) {
      animating = true;
      panel.fadeOut(1000, function() {
        animating = false;
        panel.remove();
      });
      return;
    }

    animating = true;
    panel.appendTo(container).fadeIn(1000, function() {
      animating = false
    });
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">
  <div class="btn btn-primary">
    Toggle Button
  </div>
  <div class="panel panel-default toggle">
    <div class="panel-body">
      Content being toggled
    </div>
  </div>
</div>

注意，在这两种情况下，面板元素都被删除/添加到 DOM。我在 jQuery 中这样做是为了模仿 ng-if 的行为。

当 Angular 通过 ng-if 向 DOM 添加元素时，有没有办法使用 jQuery 动画？如果ng-show 可以，那就更好了。我不需要不使用 jQuery 的解决方法，我可以自己解决。答案必须使用 jQuery 动画。不过，支持 jQuery 动画的一点 css 就可以了。

Answer 1

当您使用 angular.js 插入元素时，它会使用您在 CSS 中设置的任何样式，然后执行您的动画功能。在已经可见的元素上使用 .fadeIn() does nothing。如果你想淡入，你需要先在你的css中将它的display属性设置为none：

.toggle{
    display: none;
}

...或者在你的动画函数中淡入之前：

element.css("display","none").fadeIn(1000, done);

这是一个有效的代码：

var app = angular.module('app', ['ngAnimate']);

app.controller('Ctrl', ['$scope',
  function($scope) {
    $scope.data = {};
    $scope.data.toggle = true;
  }
]);

app.animation('.toggle', function() {
  return {
    enter: function(element, done) {
      element.css("display","none").fadeIn(1000, done);
    },
    leave: function(element, done) {
      element.fadeOut(1000, done);
    }
  };
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>

<div ng-app="app" ng-controller="Ctrl">
  <div class="btn btn-primary" ng-click="data.toggle = ! data.toggle">
    Toggle Button
  </div>
  <div class="panel panel-default toggle" ng-if="data.toggle">
    <div class="panel-body">
      Content being toggled
    </div>
  </div>
</div>