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操作不应该在控制器中完成。）

这是一种有角度的做法吗？

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

Answer 1

你应该使用角度动画。他们正在提供 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

在点击时调用动画

1 个答案: