Javascript 在Angular中使用jQuery设置抽屉动画

我有一个抽屉隐藏在面板后面，使用绝对定位和z索引。面板上有一个按钮，单击该按钮时，通过使用jQuery设置顶部边距的动画来显示抽屉。我使用jQuery这样做的原因是为了支持IE8/9

我已经看过了有关ng show和ng hide的$animation文档，但在定义jQuery实现时，我对它的实际工作方式有点困惑

<div class="drawer" ng-show="player.isDrawerOpen()"></div>

<div class="panel">
    <button ng-click="player.openDrawer()"></button>
</div>

angular.module('App')
.animation('.drawer', ['$log',
    function($log) {
        return {
            addClass: function(element, className, done) {
                $log.log(element, className, done);

                jQuery(element).animate({
                    marginTop: '0',
                    duration: 2000
                }, done);

                return function(isCancelled) {
                    if (isCancelled) {
                        jQuery(element).stop();
                    }
                };
            },
            removeClass: function(element, className, done) {
                $log.log(element, className, done);

                jQuery(element).animate({
                    marginTop: '-180px',
                    duration: 2000
                }, done);

                return function(isCancelled) {
                    if (isCancelled) {
                        jQuery(element).stop();
                    }
                };

            }
        };
    }]);

角度。模块（'App'）
.animation（“.drawer”、[“$log”，
函数（$log）{
返回{
addClass:函数（元素、类名、完成）{
$log.log（元素、类名、完成）；
jQuery（元素）。设置动画({
marginTop:'0'，
持续时间：2000年
}，完成）；
返回函数（已取消）{
如果（已取消）{
jQuery（element.stop（）；
}
};
},
removeClass:函数（元素、类名、完成）{
$log.log（元素、类名、完成）；
jQuery（元素）。设置动画({
marginTop:“-180px”，
持续时间：2000年
}，完成）；
返回函数（已取消）{
如果（已取消）{
jQuery（element.stop（）；
}
};
}
};
}]);

我可以验证，当我单击该按钮时，我要触发的事件是否被广播。我还可以验证在单击按钮后player.isDrawerOpen（）是否返回true。但是当从.drawer div中删除ng hide类时，addClass或removeClass都不会记录任何内容

---

我想帮助您了解如何将我编写的仅在添加或删除ng hide时才显示/隐藏的动画绑定到抽屉。

解决了问题。这不是我的JS，而是我仍然在使用angular.JS v1.2.12和angular-animate.JS v1.2.14，并且没有提供ngAnimate依赖项。如果缺少依赖项，但使用angular.module（）.animation（）创建动画，angular不会抛出警告