无法在AngularJS中运行动画演示
[英]Can't run the animation demo in AngularJS
问题描述
我阅读了角度动画文档并重新创建了演示 。 如果单击“ Fold In按钮，文本将更改为animate define 。 该演示不能很好地运行。 动画效果不佳。
这是我的代码： 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)
如果您知道如何修复此错误，请编写好的演示。 我现在就投票给你答案。
2 个解决方案
解决方案1
2 已采纳 2017-01-01 08:06:16
我从你的小提琴手那里复制了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函数。
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) {
})
解决方案2
1 2017-01-01 07:20:59
像这样创建你的模块
var app = angular.module('app', ['ngAnimate']);
然后你可以通过angular.module('app')或app访问你的模块
var app = angular.module('app', ['ngAnimate']); 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 }); } } }]); app.controller('myctrl', function ($scope) { })
.red { background:red; color: purple} .large-text { font-size:20px; } /* we can also use a keyframe animation and $animateCss will make it work alongside the transition */ .pulse-twice { animation: 0.5s pulse linear 2; -webkit-animation: 0.5s pulse linear 2; } @keyframes pulse { from { transform: scale(0.5); } to { transform: scale(1.5); } } @-webkit-keyframes pulse { from { -webkit-transform: scale(0.5); } to { -webkit-transform: scale(1.5); } }
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script> <body ng-app="app" ng-controller="myctrl"> <div ng-if="onOff" class="fold-animation"> This element will go BOOM </div> <button ng-click="onOff = true">Fold In</button> </body>
npm run demo 没有指向 demo
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.