在 Angular 中使用 jQuery 为抽屉设置动画答案

【问题标题】：Animating a drawer using jQuery in Angular在 Angular 中使用 jQuery 为抽屉设置动画
【发布时间】：2014-03-07 22:06:57
【问题描述】：

我有一个使用绝对定位和 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();
                    }
                };

            }
        };
    }]);

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

我想知道如何在添加或删除 ng-hide 时将我编写的显示/隐藏动画绑定到抽屉。

【问题讨论】：

标签： javascript jquery angularjs ng-animate

【解决方案1】：

找出问题所在。这不是我的 JS，而是我仍在使用 angular.js v1.2.12 和 angular-animate.js v1.2.14 并且没有提供 ngAnimate 依赖项。如果缺少依赖项但您使用 angular.module().animation() 创建动画，Angular 不会抛出警告。

【讨论】：