我阅读了角度动画文档并重新创建了演示.
如果单击“折叠”按钮,文本将更改为动画定义.
该演示不能很好地运行.动画效果不佳.
这是我的代码：
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) {
})
