javascript - 单击时调用动画

Question

我正在使用 AngularJS v1.2

我想在单击按钮后运行动画。

伪:

<a ng-click="submit()" type="button">Submit</a>

Controller 有一个方法“提交”，它会发出 AJAX 请求:

$scope.submit = function(){
  $http( { method: 'POST', url: '/url' } ).success(function(data) {
      $scope.myData = data.myData;
      //Animate DOM element 
  });
});

这就是我的问题所在。我希望能够在 ajax 回调上运行动画。

但是，文档说这不是一个好主意(DOM 操作不应该在 Controller 中完成。)

那么什么是 Angular 方法呢？

基本上，我如何在 Angular 中进行Click->Ajax->Animation

Answer 1

您应该使用 Angular 动画。他们提供 ngAnimate 服务来轻松完成此操作。

您可以使用 CSS3 过渡为 DOM 元素添加动画效果。只需使用 ngClass 并在收到 ajax 响应后切换它即可。您的 DOM 元素将自动生成动画。

.css-class-add, .css-class-remove {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.css-class,
.css-class-add.css-class-add-active {
  color: red;
  font-size:3em;
}

.css-class-remove.css-class-remove-active {
  font-size:1.0em;
  color:black;
}

See Angular Animation in action