jquery - 如何在 AngularJs 中执行 jQuery 动画，例如淡入和淡出

Question

我是 AngularJs 的新手，所以我需要执行以下操作:

我有一个div和一个按钮，我想当我单击按钮时进行ajax调用，当我完成时我想做:

1. 删除 div。
2. 或者添加新的。

我想学习如何使用 jQuery 动画(slideUp 和 slideDown)来完成这两个操作(当然不是通过相同的点击)。

Answer 1

您可以使用ngShow进行以下jsfiddle基于 Angular 。

html代码:

<div ng-app="App">
  Click me: <input type="checkbox" ng-model="checked"><br/>
     <div class="check-element animate-show" ng-show="checked">
      <span class="icon-thumbs-up"></span> I show up when your checkbox is checked.
    </div>
    <div class="check-element animate-show" ng-hide="checked">
      <span class="icon-thumbs-down"></span> I hide when your checkbox is checked.
    </div>
</div>

CSS 样式

.animate-show.ng-hide-add, 
.animate-show.ng-hide-remove {
  -webkit-transition:all linear 0.5s;
  -moz-transition:all linear 0.5s;
  -o-transition:all linear 0.5s;
  transition:all linear 0.5s;
  display:block!important;
}

.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove {
  line-height:0;
  opacity:0;
  padding:0 10px;
}

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;
}

.check-element {
  padding:10px;
  border:1px solid black;
  background:white;
}

最后是 JavaScript 代码，不要忘记包含库 angular.js 和 angular-animate.js

angular.module('App', ['ngAnimate']);

希望对你有帮助;)

替代方案2 您还可以使用 javascript 制作动画:-

myModule.animation('fade', function() {
  return { 
    setup : function(element) {
      element.css({'opacity': 0}); 
    },
    start : function(element, done, memo) {
      element.animate({'opacity': 1}, function() {
        done(); 
      });
    }
  };
});

点击此链接-http://www.yearofmoo.com/2013/04/animation-in-angularjs.html#how-to-use-animations-in-angularjs