Jar*_*rod 6 angularjs angular-ui-router
我正在制作一个水平导航的页面,它工作正常.但现在我需要添加一些动画.我想添加类似旋转木马的导航.因此,当访问者点击"下载"按钮时,所有内容都从右向左滚动,如果访问者点击"主页",则会返回但是从左到右动画.我还希望它在访问者开始滚动时在页面之间导航.
我用Google搜索了一些解决方案,但除了css动画之外什么也没有找到,它忽略了幻灯片的顺序并始终以单向滑动方式执行.我是棱角分明的新人,我将不胜感激任何帮助.
这是我的 index.html
<!DOCTYPE html>
<html lang="es" ng-app=“opw">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap-3.3.5.min.css" />
</head>
<body>
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#”>One page website</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Inicio</a></li>
<li><a ui-sref="how_does_it_work”>How does it work?</a></li>
<li><a ui-sref="wanted”>Wanted</a></li>
<li><a ui-sref="app”>Download app</a></li>
</ul>
</nav>
<!-- MAIN CONTENT -->
<div class="container">
<div ui-view></div>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-animate/angular-animate.min.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script></script>
<script src="js/app.js"></script>
</body>
</html>
和 app.js
angular.module(‘opw', ['ui.router'])
// router configuration
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/',
templateUrl: 'template/homepage/home.html'
})
// HOW-DOES-IT-WORK PAGE AND MULTIPLE NAMED VIEWS =================================
.state('how_does_it_work', {
url: ‘/how-does-it-work',
templateUrl: 'template/homepage/hdiw.html'
})
// WANTED PAGE AND MULTIPLE NAMED VIEWS =================================
.state('wanted', {
url: ‘/wanted',
templateUrl: 'template/homepage/wanted.html'
})
// DOWNLOAD-APP PAGE AND MULTIPLE NAMED VIEWS =================================
.state('app', {
url: ‘/download',
templateUrl: 'template/homepage/app.html',
});
$urlRouterProvider.otherwise('/');
});