如何在AngularJs中执行jQuery动画,如淡入和淡出

发布时间：2020-12-17 07:00:51 所属栏目：安全来源：网络整理

导读：我是AngularJs的新手,所以我需要做以下事情：我有一个div和一个按钮,当我点击按钮进行ajax调用时我想要当我完成时我想做：删除div. 或者添加新的. 我想学习如何使用jQuery动画(slideUp和slideDown)来完成它们(当然不是同样的点击). 解决方法您可以使用 ng

我是AngularJs的新手,所以我需要做以下事情：

我有一个div和一个按钮,当我点击按钮进行ajax调用时我想要当我完成时我想做：

>删除div.
>或者添加新的.

我想学习如何使用jQuery动画(slideUp和slideDown)来完成它们(当然不是同样的点击).

解决方法

您可以使用 ngShow根据角度制作以下 jsfiddle.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!