Javascript 角度动画

在从Angular开始休息之后，我决定重新加入这股潮流。我目前正在从事一个相对较小的项目，以帮助我完全适应该框架，我发现自己陷入了困境

我已经反复读过，在AngularJS中使用jQuery是禁止的禁忌，尽管我不一定完全理解如何在AngularJS中执行以下操作

controller.js

---

可以看出，我只是想淡出欢迎信息，进入主要内容。我知道ngAnimate，虽然我还是个新手。我的问题是——有没有什么简单的方法可以不用jQuery就完成上面的工作？

在AngularJS中使用jQuery并不是禁忌。在控制器中使用jQuery操作DOM是一种很好的方法。您可以在指令或动画中使用jQuery。例如（）：

有关javascript/jquery动画的更多信息，请参阅：

• 瘦削的官员
• 角度（我使用了他们的演示作为基础）

---

我想您可以使用CSS动画，但这些动画很难用Javascript正确控制。如果只是一个简单的页面淡入效果，CSS是最好的选择。看起来你可以使用CSS和

ng class

来实现类似的效果，但有时你可能会想使用jQuery APi或类似的东西。在这些情况下，我认为您应该使用

链接：function（）{}

来进行任何DOM操作，如果您想使用JQLite Plunker以角度方式进行操作，请确保传入

范围、元素、属性

参数：

(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 );
            }
        }]);

})();

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();
      }
    }
  }
});