Question

我已经向AngularJS添加了依赖项ngAnimate：

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

我已将动画类添加到animation.css：

.slide-animation.ng-enter, .slide-animation.ng-leave {
    -webkit-transition: 0.5s linear all;
    -moz-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
    transition: 0.5s linear all;
    position:relative;
    height: 1000px;
}

并将此CSS文件包含在头部：

<head>              
    <link href="app/styles/animations.css" rel="stylesheet" type="text/css"/>
</head>

然后我在index.html文件中使用了这个类：

<!doctype html>
<html ng-app="testApp">
<head>
    <title>Foo App</title>              
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
                rel="stylesheet" type="text/css"/>      
    <link href="app/styles/animations.css" rel="stylesheet" type="text/css"/>
</head>
<body >         

    <div ng-view="" class="slide-animation"></div>       

    <script src="scripts/angular.js"></script>
    <script src="scripts/angular-route.js"></script> 
    <script src="scripts/angular-animate.js"></script> 
    <script src="app/app.js"></script>
    <script src="app/controllers/employeeController.js"> </script>
    <script src="app/controllers/depController.js"></script>
    <script src="app/services/employeeFactory.js"/></script>
</body>

但是，没有幻灯片动画。

我已经看到了这个tutorial，我的行为与使用animation.css文件中的动画相同。

请问，有人知道我错过了什么吗？

Answer 1

我想你错过了ng-app。将ng-app="app"放在BODY或HTML作为属性。并将ng-animate放在div上。

<body ng-app="app">      
   <div ng-view="" class="slide-animation" ng-animate="animate"></div>
<body>

CSS：

.slide-animation {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 560px;
}
.slide-animation.ng-enter  .ng-enter-active, .slide-animation.ng-leave {
    -webkit-transition: 0.5s linear all;
    -moz-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
    transition: 0.5s linear all;
    position:relative;
    height: 1000px;
}

然后我认为这将是有效的

Answer 2

检查是否已加载scripts/angular-animate.js。您可以通过检查每个浏览器中的源或网络面板中的文件是否存在来验证这一点。

根据您所描述的angular-animate.js文件未包含在文档中，这就是ngAnimate指令不起作用的原因。

如何在Angular 1.5.8中使用Animation.css？

2 个答案: