javascript - 无法在 AngularJS 中运行动画演示

Question

我阅读了 Angular 动画文档并重新创建了演示。 如果单击 Fold In 按钮，文本将更改为 animate define。 演示 效果不佳。 动画 效果不佳。

这是我的代码: https://jsfiddle.net/jiexishede/5nokogfq/

在网络 Storm 中:
我将 var app = angular.module('app', []); 更改为 var app = angular.module('app', ['ngAnimate']); . 错误显示:

Uncaught Error: [$injector:unpr] Unknown provider: $$isDocumentHiddenProvider <- $$isDocumentHidden <- $$animateQueue <- $animate <- $compile <- $$animateQueue
http://errors.angularjs.org/1.5.8/$injector/unpr?p0=%24%24isDocumentHiddenP…eQueue%20%3C-%20%24animate%20%3C-%20%24compile%20%3C-%20%24%24animateQueue
    at angular.js:68
    at angular.js:4511
    at Object.getService [as get] (angular.js:4664)
    at angular.js:4516
    at getService (angular.js:4664)
    at injectionArgs (angular.js:4688)
    at Object.invoke (angular.js:4710)
    at angular.js:4517
    at getService (angular.js:4664)
    at injectionArgs (angular.js:4688)

如果您知道如何修复此错误，请编写好的演示。我现在就给你的答案投票。

Answer 1

我已经从你的 fiddler 那里复制了 JS:

 var app = angular.module('app', ['ngAnimate']);
   angular.module('app', ['ngAnimate']).animation('.fold-animation', ['$animateCss', function($animateCss) {
            return {
                enter: function(element, doneFn) {
                    var height = element[0].offsetHeight;
                    return $animateCss(element, {
                        addClass: 'red large-text pulse-twice',
                        easing: 'ease-out',
                        from: { height:'0px' },
                        to: { height:height + 'px' },
                        duration: 10 // one second
                    });
                }
            }
        }]);
   angular.module('app', ['ngAnimate']).controller('myctrl', function ($scope) {

    })

你做错的是多次使用 module "setter"函数。

在你写的第一行:

var app = angular.module('app', ['ngAnimate']);

这将定义一个名为 app 的新模块，并将模块实例分配给 app 变量。

从这里开始，您不能再声明名称为app的模块，只能获取该模块的实例。

当使用带有 2 个参数的 angular.module 函数时，您正在使用将创建新模块的“setter”。 要获取实例，请使用仅包含模块名称参数的 angular.module 函数。

angular.module('app', ['ngAnimate']);    
var app = angular.module('app');

因此修复您的代码:

angular.module('app', ['ngAnimate']);
angular.module('app').animation('.fold-animation', ['$animateCss', function($animateCss) {
            return {
                enter: function(element, doneFn) {
                    var height = element[0].offsetHeight;
                    return $animateCss(element, {
                        addClass: 'red large-text pulse-twice',
                        easing: 'ease-out',
                        from: { height:'0px' },
                        to: { height:height + 'px' },
                        duration: 10 // one second
                    });
                }
            }
        }]);
angular.module('app').controller('myctrl', function ($scope) {

    })