Question

我正在尝试使用带角度的ngAnimate模块的jQuery动画。特别是，对于此示例，jQuery的fadeIn和fadeOut。我可以使用.ng-enter和.ng-leave等来处理css转换，但出于某种原因，不是jQuery。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

当angular通过ng-if向DOM添加元素时，有没有办法使用jQuery animiations？如果ng-show可能会更好。我不需要使用不使用jQuery的解决方法，我可以自己解决这些问题。答案必须使用jQuery动画。但是，支持jQuery动画的一小部分CSS很好。

Answer 1

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

.toggle{
    display: none;
}

...或在你的动画功能中淡出它：

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

这是一个有效的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

使用带有角度的ngAnimate的jQuery动画

1 个答案: