Question

最近，我一直在使用将AngularJS与CSS动画结合使用的方法，这种方法看起来不错而花哨。我正在尝试结合jQuery来运行动画并遇到一些问题。

退出动画效果很好，但Enter效果不好。它确实触发了控制台中的消息，但是动画本身无法运行。我在这里做什么错了？

var app = angular.module('plunker', ['ngAnimate']);

app.controller('MainCtrl', function($scope) {
  vm = this;
  vm.divExists = true;
  vm.click = function() {
    vm.divExists = !vm.divExists;
  }
});

app.animation('.yeet', [function() {
  return {
    enter: function(element, doneFn) {
      console.log('entering');
      jQuery(element).slideDown(400, doneFn);
    },
    leave: function(element, doneFn) {
      console.log('exiting');
      jQuery(element).slideUp(400, doneFn);
    }
  }
}]);

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  <script data-require="jquery@3.2.1" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script data-require="ngAnimate@*" data-semver="1.4.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-animate.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl as vm">

  <button ng-click="vm.click();">
    Click Me
  </button>
  <div class="yeet" style="background-color:green;" ng-if="vm.divExists">
    <h1>This part should slide in and out with button clicks.</h1>
  </div>

</body>

</html>

Answer 1

经过几个小时的脑力劳动，我决定回去研究jQuery的基础知识。

动画无法运行，因为将元素重新引入DOM时，它已经处于“完成”动画阶段。由于jQuery无需执行任何操作，因此它会报告完成。

要解决此问题，只需一行即可将元素置于jQuery的slideDown动画所需的初始阶段：element.css（'display'，'none'）;

修改后的代码：

var app = angular.module('plunker', ['ngAnimate']);

app.controller('MainCtrl', function($scope) {
  vm = this;
  vm.divExists = true;
  vm.click = function() {
    vm.divExists = !vm.divExists;
  }
});

app.animation('.yeet', [function() {
  return {
    enter: function(element, doneFn) {
      console.log('entering');
      element.css('display', 'none'); // <---- this is all I needed to add
      jQuery(element).slideDown(400, doneFn);
    },
    leave: function(element, doneFn) {
      console.log('exiting');
      jQuery(element).slideUp(400, doneFn);
    }
  }
}]);

app.animation('.yote', [function() {
  return {
    enter: function(element, doneFn) {
      jQuery(element).slideDown(400, doneFn);
    }
  }
}])

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  <script data-require="jquery@3.2.1" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script data-require="ngAnimate@*" data-semver="1.4.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-animate.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl as vm">

  <button ng-click="vm.click();">
    Click Me
  </button>
  <div class="yeet" style="background-color:green;" ng-if="vm.divExists">
    <h1>This part should slide in and out with button clicks.</h1>
  </div>

</body>

</html>

AngularJS ngAnimate适用于ng-leave，但不适用于ng-enter

1 个答案: