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

あなたの投稿を 2 回読みましたが、あなたの問題を正確に理解できませんでした。しかし、私が理解したことから、あなたは適切なスタイルをしなければなりません. 私が通常行うこと：

  1. ビューの親コンテナを設定position:relative
  2. アニメーション (ng-enter、ng-leave、active、...) の瞬間に、position:absolute両方のビュー コンテナーに設定されます。

これにより、別のビューが下に移動したり、ページ上の他の要素の位置が変更されたりすることはありません。

于 2015-01-08T12:24:24.387 に答える