角度動畫

Question

在從 Angular 休息一下之后，我決定重新加入這個潮流。 我目前正在從事一個相對較小的項目，以幫助我完全適應該框架，但我發現自己陷入了困境。

我一遍又一遍地讀到，在 AngularJS 中使用 jQuery 是被禁止的禁忌，盡管我不一定完全理解如何在 AngularJS 中執行以下操作，

控制器.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 的情況下完成我在上面所做的工作？

Answer 1

在 AngularJS 中使用 jQuery 並不是禁止的禁忌。 使用 jQuery 在控制器中操作 DOM 是。 您可以在指令或動畫中使用 jQuery。 例如（演示）：

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 （我以他們的演示為基礎）。