如何在Angular 1.5.8中使用Animation.css

How to get worked Animation.css in Angular 1.5.8?

本文关键字：Animation css Angular      更新时间：2023-09-26

我已经在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文件包含在header中:

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

但是，没有幻灯片动画。

我已经看过这个教程，我的动作是相同的，从animation.css文件中获得使用的动画。

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

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

从你所描述的angular-animate.js文件不包括在文件中，这就是为什么ngAnimate指令不工作。

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

那么我想它会成功的

相关文章：