1

嗨，我有一个角度应用程序。它运行良好。我已经决定我希望它在视图之间进行动画处理。在这种情况下……当用户单击导航栏上的链接时……视图会滑动到不同的视图。

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

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

1 回答 1

0

我读了你的帖子两次，但不能完全理解你的问题。但据我了解，你必须做适当的风格。我通常做的事情：

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

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

于 2015-01-08T12:24:24.387 回答