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

我阅读了角度动画文档并重新创建了演示.
如果单击“折叠”按钮,文本将更改为动画定义.
该演示不能很好地运行.动画效果不佳.

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

在Webstorm中：
 我改变了var app = angular.module(‘app’,[]); as 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)

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

最佳答案

我从你的小提琴手那里复制了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) {

    })

你做错了多次使用模块“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',duration: 10 // one second
                    });
                }
            }
        }]);
angular.module('app').controller('myctrl',function ($scope) {

    })