angularjs – 带有角度ui路由器的旋转木马导航的One Page网站

发布时间：2020-12-17 06:58:38 所属栏目：安全来源：网络整理

导读：我正在制作一个水平导航的页面,它工作正常.但现在我需要添加一些动画.我想添加类似旋转木马的导航.因此,当访问者点击“下载”按钮时,所有内容都从右向左滚动,如果访问者点击“主页”,则会返回但是从左到右动画.我还希望它在访问者开始滚动时在页面之间导航.

我正在制作一个水平导航的页面,它工作正常.但现在我需要添加一些动画.我想添加类似旋转木马的导航.因此,当访问者点击“下载”按钮时,所有内容都从右向左滚动,如果访问者点击“主页”,则会返回但是从左到右动画.我还希望它在访问者开始滚动时在页面之间导航.

我用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('/');
    });

解决方法

我想你正在寻找像 this这样的东西
这将动态您的状态转换
现在这不是你想要的,

>当导航方向反转时,您希望动画反转 – 为了实现我建议您使用ng-class根据导航方向应用该类.
>您希望动画在按下主页之前在所有状态之间循环 – 现在可以通过使用堆栈数据结构来实现,只需按下所有状态作为向前移动并在按下主页时弹出堆栈的元素并转换到该状态,执行此操作直到达到主页/堆栈为空.

希望这能指出你正确的方向.快乐的编码.

干杯

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!