Question

这是我的HTML：

<html>
<head></head>
<body>
<form role="form" ng-if="on" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
...stuff...
</form>
</body>
</html>

这是我的模特：

$scope.on = false;

//attaching this function to the window so i can call it from the console
window.switchOn = function() {
    $scope.$apply(function() {
        $scope.on = !$scope.on
    });
}

这是我的CSS：

.animate-enter {
  -webkit-transition: 1s linear all; /* Chrome */
  transition: 1s linear all;
  opacity: 0;
}

.animate-enter.animate-enter-active {
  opacity: 1;
}

我还将ngAnimate包含添加到我的应用控制器：

angular.module('app', [..., 'ngAnimate'])...

这样做的目的是从控制台切换表单。根据ngAnimate文档，表单应该显示为外观（我使用Chrome）。但它不是。我已经包含了角度动画文件。我可以在加载的源中看到它。我做错了什么？

Answer 1

第一步：确保包含ng-animate模块。以下是the docs的步骤：

除非您在应用程序中包含ngAnimate module作为依赖项，否则无法使用动画。

首先在HTML中包含angular-animate.js：

<script src="angular.js">
<script src="angular-animate.js">

您可以从以下位置下载此文件：

Google CDN
//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js
<强>鲍尔
bower install angular-animate@X.Y.Z
<强> code.angularjs.org
//code.angularjs.org/X.Y.Z/angular-animate.js"
其中X.Y.Z是您正在运行的AngularJS版本。

然后通过将模块添加为依赖模块来加载应用程序中的模块：
angular.module('app', ['ngAnimate']);
有了这个你已经准备好开始了！

第二步： 您的CSS需要.ng-enter类：

.reveal-animation.ng-enter {
    -webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
    animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
}
@-webkit-keyframes enter_sequence {
    from { opacity:0; }
    to { opacity:1; }
}
@keyframes enter_sequence {
    from { opacity:0; }
    to { opacity:1; }
}

你的html只需要有这个类：

class="reveal-animation"

http://jsfiddle.net/bpR66/

如果是1.2版之前

您的CSS需要-setup和-setup.-start类：

.animate-enter-setup {
    -webkit-transition:all linear 1s;
    -moz-transition:all linear 1s;
    -ms-transition:all linear 1s;
    -o-transition:all linear 1s;
    transition:all linear 1s;
}

.animate-enter-setup {
    max-height: 0;
    opacity:0;
}
.animate-enter-setup.animate-enter-start {
    opacity:1;
    min-height: 20px;
}

这是我修改过的一个小提琴，用于展示示例（不使用表单，但应该演示）：http://jsfiddle.net/xv5ry/1/

无法让ngAnimate在angular1.2中工作

1 个答案: