Question

我想使用AngularJS（Material）构建一个水平滑动的网站，但是我在配置动画时遇到了麻烦。我想要的是当点击的菜单链接从当前页面开始时向左滑动页面。我已设置ngRoute来更改视图：

angular.module('app')
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider
            .when("/home", {
                templateUrl: 'home.html',
                controller: 'homeController'
            })
            .when("/test", {
                templateUrl: 'test.html',
                controller: 'testController'
            })
            .otherwise({ redirectTo: "/home" })
    })
    .controller('navController', function ($scope, $route, $routeParams, $location) {
        $scope.$route = $route;
        $scope.$location = $location;
        $scope.$routeParams = $routeParams;
    });

使用以下index.html：

<body ng-cloak>
    <div layout="column">
            <md-toolbar id="navbar" flex="grow" ng-controller="navController">
                <div class="md-toolbar-tools">
                    <md-button ng-href="#home">Home</md-button>
                    <md-button ng-href="#test">Test</md-button>                        
                </div>
            </md-toolbar>           
        <md-content class="view" ng-view></md-content>
    </div>   
</body>

我想使用ngAnimate CSS类为视图设置动画，但我不知道如何根据菜单结构有条件地设置类，例如设置.view.ng-enter.left或.view.ng-enter.right。您可以找到网站here。

用ngRoute左右滑动

0 个答案: