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的模块，只能获取此模块的实例。

当使用带有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) {

    })

Answer 2

像这样创建你的模块

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

然后您可以angular.module('app')或app

访问您的模块

＆＃13;

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) {
})

＆＃13;

.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); }
        }

＆＃13;

<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>

＆＃13;

无法在AngularJS中运行动画演示

2 个答案: