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

【问题标题】：How to get worked Animation.css in Angular 1.5.8?如何在 Angular 1.5.8 中使用 Animation.css？
【发布时间】：2016-08-31 15:31:14
【问题描述】：

我已向 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 文件中获取使用过的动画相同。

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

【问题讨论】：

类添加是否正确？
@HorstJahns 在我看来，class 已正确添加。这段代码sn-p还不够吗？
您确定 scripts/angular-animate.js 的位置正确吗？在控制台中您是否遇到了一些错误？
@SimoEndre 你是对的！控制台没有错误。你推动我使用调试器，我发现没有注入“ngAnimate”。这是因为我混淆了文件。随意回答，我会标记它。感谢您的努力！:)
@StepUp 没问题，它发生了 :)

标签： javascript css angularjs animation css-animations

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我想你错过了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;
}

那我觉得会成功的

【讨论】：

哎呀，抱歉误导。但是，我有 ng-app 指令。请查看我更新的问题。
你试过 ng-animate="'animate'" 吗？
是的，什么都没有发生