Angular Animations

Angular Animations

本文关键字：Animations Angular      更新时间：2023-09-26

离开Angular一段时间后，我决定重新加入这股潮流。我目前正在做一个相对较小的项目，以帮助我完全习惯这个框架，但我发现自己被卡住了。

我一遍又一遍地读到使用jQuery和AngularJS是禁忌，虽然我不一定理解如何在AngularJS中做以下事情，

controller.js 

(function(){
    angular.module('app')
        .controller('homeCtrl', ['cache', 'page', '$scope', function(cache, page, $scope) {
            page.title.set('Home');
            if( !cache.getKey('welcomed') ) {
                $( "#welcome-message" ).fadeTo( 3000 , 0, function() {
                    $( "#welcome-message" ).hide();
                    $( "#after-welcome" ).show();
                    $( "#after-welcome" ).fadeTo( 2500 , 100 );
                    // cache.setKey('welcomed', true);
                });
            } else {
                $( "#welcome-message" ).hide();
                $( "#after-welcome" ).show();
                $( "#after-welcome" ).fadeTo( 2500 , 100 );
            }
        }]);
})();

可以看到，我只是想从欢迎信息中淡出，进入主要内容。我知道ngAnimate，虽然我仍然是一个新手。我的问题是——有没有一种简单的方法可以在不使用jQuery的情况下完成我上面所做的工作?

在AngularJS中使用jQuery并不是禁忌。使用jQuery在控制器中操作DOM是很简单的。你可以在指令或动画中使用jQuery。例如(demo):

myModule.animation('.show-hide-animation', function() {
  return {
    beforeAddClass : function(element, className, done) {
      if(className == 'ng-hide') {
        element.fadeTo(2500, 0, function() {
          done();
        });
        return function() {
          element.css('opacity', null);
        }
      } else {
        done();
      }
    },
    removeClass : function(element, className, done) {
      if(className == 'ng-hide') {
          element.fadeTo( 3000 , 0, function() {
            element.fadeTo( 2500 , 1, function() {
              done();
            });
          });      
        return function() {
          element.css('opacity', null);
        }
      } else {
        done();
      }
    }
  }
});

你可以阅读更多关于javascript/jquery动画的内容:

  • Angular官方文档。
  • angular ng-newsletter(我使用他们的演示作为基础)。
相关文章：