Question

我正在制作一个基本的AngularJS应用程序。现在我想在我的视图之间做一个动画。但它不起作用，动画不会触发。 I followed the tutorial on the AngularJS website。我可能错过了一些东西，我的控制台也没有错误。

router.js

(function (app) {
    app.config(function ($routeProvider, $locationProvider) {
        $routeProvider.when('/home', {
            controller: 'homeController',
            templateUrl: 'home.html'
        }).when('/product', {
            controller: 'productController',
            templateUrl: 'products.html'
        }).otherwise({
            redirectTo: '/home'
        });
    });

}(angular.module('myApp', ['ngRoute'])));

homeController.js（productcontroller基本相同）

(function (app) {

    var homeController = function ($scope) {
        $scope.title = "Test";
    }

    app.controller('homeController', ["$scope", homeController]);

}(angular.module('myApp')));

我在app.js中注册了我的模块：

(function () {
    angular.module('myApp', ['ngAnimate']);
}());

在我的index.html文件中，我包含以下资源：

<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-animate.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="myApp/app.js"></script>
<script src="myApp/router.js"></script>
<script src="myApp/controllers/homeController.js"></script>
<script src="myApp/controllers/productController.js"></script>

我认为这个设置没问题，除动画外一切正常。我正在index.html中执行动画，如下所示：

<style type="text/css">
.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; }
}
</style>

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

我无法看到我做错了让这些动画有效。

版本：Angular版本：1.2.5奇点扩展

浏览器：在Chrome，FF和IE中测试

Answer 1

尝试：

app.js：

(function () {
    angular.module('myApp', ['ngAnimate','ngRoute']);//add all dependencies at once.
}());

route.js：

(function (app) {
    app.config(function ($routeProvider, $locationProvider) {
        $routeProvider.when('/home', {
            controller: 'homeController',
            templateUrl: 'home.html'
        }).when('/product', {
            controller: 'productController',
            templateUrl: 'products.html'
        }).otherwise({
            redirectTo: '/home'
        });
    });

}(angular.module('myApp'))); //just retrieve the module.

原因是您的路由器angular.module('myApp', ['ngRoute'])。 创建了一个名为“myApp”的新模块 覆盖 < / strong>您之前在app.js中创建的angular.module('myApp', ['ngAnimate']);。

请注意使用angular.module（'myModule'，[]）将创建模块myModule并覆盖任何名为myModule的现有模块。使用 angular.module（'myModule'）来检索现有模块。

来自Documentation

AngularJS动画不会触发

1 个答案: