您好，我有一个 Angular 应用程序。它运行良好。我已经决定我希望它在 View 之间设置动画。在这种情况下......当人们点击导航栏上的链接时...... View 会滑动到不同的 View 。
我的想法来自于:Sliding between views这行得通!但是页脚在屏幕中间突然上升，导航栏在滑动 View 后面。这段代码的位置绝对是罪魁祸首:
<div ui-view class="slide"></div>
我不知道该把它放在哪里。我试过把它放在导航栏上方...不足为奇...它使导航栏滑动...所以我将它移到了导航栏......它有效......但整个 View 滑动到页眉顶部和页脚后面!而不是在页脚仍在底部而页眉在顶部的情况下滑动。
它应该是这样的:
它看起来像这样:
如有任何帮助，我们将不胜感激。
<html ng-app="financeApp">
<head>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<
<link href="css/higgidy_carousel.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<!-- HEADER AND NAVBAR -->
<header>
<div class="wrap">
<!-- logo -->
<a href="#!"><img class="logo" src="img/logo.png" /></a>
<h7>Change the way you save
into your investments<h7>
</header>
<body>
<ng-controller = "demoCtrl">
<ul class="nav nav-pills pull-right">
<li ng-class="{active: isState('home') }">
<a ui-sref="home">Home</a>
</li>
<li ng-class="{active: isState('form') }">
<a ui-sref="form">Join Us</a>
</li>
<li ng-class="{active: isState('about') }">
<a ui-sref="about">About</a>
</li>
<li ng-class="{active: isState('invest') }">
<a ui-sref="invest">Investments</a>
</li>
<li ng-class="{active: isState('contact') }"> </div>
<a ui-sref="contact">Contact</a>
</li>
</ul>
<h3 class="text-muted"> </h3>
<br>
</div>
<div ui-view class="slide"></div>
<!-- Loading the Footer -->
<div id="footer" ng-include="'partials/footer.html'"></div>
<!-- App JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="js/script.js"></script>
<script data-require="ui-router@0.2.10" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"> </script>
<script src="js/controllers/controllers.js"></script>
<script src="js/directives/directives.js"></script>
<script src="js/higgidy_carousel.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</body>
</html>
最佳答案
我看了你的帖子两遍，但不能完全理解你的问题。但据我了解，你必须做正确的风格。我通常做的事情:
- 设置 View 的父容器
position:relative - 在动画的时刻(ng-enter、ng-leave、activity，...)将
position:absolute设置为两个 View 容器。
这不会将另一个 View 推到底部，也不会改变页面上其他元素的位置。
关于html - 在 View 之间滑动有效...但是 View 位于页眉顶部和页脚后面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27838850/