无法在AngularJS中运行动画演示

Question

我阅读了角度动画文档并重新创建了演示.如果单击该Fold In按钮,文本将更改为animate define.该演示不能很好地运行.该动画不能很好地工作.

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

在Webstorm中:
我改变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

我从你的提琴手那里复制了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再次声明具有该名称的模块，只能获取该模块的实例。

当使用angular.module带有 2 个参数的函数时，您正在使用将创建新模块的“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) {

    })