在视图之间滑动有效...但是视图位于页眉顶部和页脚后面？

Question

嗨，我有一个 angular 应用程序。它运行良好。我已经决定我希望它在视图之间设置动画。在这种情况下...当此人单击导航栏上的 link 时...视图会滑动到不同的视图。

我从这里得到了灵感：Sliding between views这行得通！但是页脚在屏幕中间突然上升，导航栏在滑动视图后面。这段代码的位置绝对是罪魁祸首：

<div ui-view class="slide"></div>

我不知道把它放在哪里。我试过把它放在导航栏上方……不出所料……它让导航栏滑动……所以我将它移到导航栏下方...它有效...但整个视图滑动到页眉顶部和页脚后面！而不是在页脚仍然在底部而页眉在顶部的情况下滑动。

它应该是这样的：

它看起来像这样：

如有任何帮助，我们将不胜感激。

<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>

Answer 1

我读了你的 post 两遍，但不能完全理解你的问题。但据我了解，你必须做正确的风格。我通常做的事情：

设置视图的父容器position:relative
在动画时刻（ng-enter、ng-leave、activity，...）将 position:absolute 设置为两个视图容器。

这不会将另一个视图推到底部，也不会改变页面上其他元素的位置。

在视图之间滑动有效...但是视图位于页眉顶部和页脚后面？

slide between views works...but view is on top of header and behind footer?

html

css

angularjs

ng-animate

angularjs-view