javascript - 在 Angular 中使用 jQuery 为抽屉制作动画

Question

我使用绝对定位和 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 时将我编写的显示/隐藏动画绑定(bind)到抽屉。

Answer 1

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