1

私は基本的な AngularJS アプリに取り組んでいます。このアプリには、テンプレート内で定義されるページがあります。ユーザーがページを切り替えると、基本的なアニメーションで別のページを表示できるようにしたいと考えています。現在、私のアプリはこれを行っています。ただし、前のページが新しいページの下に落ち、ちらつきのようなものになります。なぜこれが起こっているのかわかりません。これが私のコードです：

<!doctype html>
<html lang="en" ng-app="app">
  <head>
    <meta charset="utf-8">
    <title>My HTML File</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.js"></script>        
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-animate.js"></script>  

    <style type="text/css">
      .myAnimation { height:480px; width:640px; overflow:hidden; }
      .myAnimation.ng-enter { animation-duration: .3s; animation-name: fadeIn; animation-timing-function: cubic-bezier(.71,.55,.62,1.57); }
      .myAnimation.ng-leave { animation-duration: .3s; animation-name: fadeOut; animation-timing-function: cubic-bezier(.71,.55,.62,1.57); }

      @keyframes fadeIn {
        from { opacity: 0; transform: scale(.9, .9); }
        to { opacity: 1; transform: scale(1, 1); }
      }

      @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
      }
    </style>    
  </head>

  <body style="margin:0; padding:0;"> 
    <ul style="list-style-type:none; margin:0px; padding:0px;">
      <li style="display:inline;"><a href='#page1'>Page 1</a>&nbsp;&nbsp;</li>
      <li style="display:inline;"><a href='#page2'>Page 2</a>&nbsp;&nbsp;</li>
    </ul>

    <div style="display:block; border:1px solid black;">
      <div ng-view class="myAnimation"></div>
    </div>

    <script type="text/javascript">
      angular.module('app', ['ngRoute', 'ngAnimate']).
        config(['$routeProvider', function($routeProvider) {
      $routeProvider.
        when('/page1', {templateUrl: 'views/page1.html', controller: Page1Ctrl}).
            when('/page2', {templateUrl: 'views/page2.html', controller: Page2Ctrl}).
            otherwise({redirectTo: '/page1'});
      }]);

      function Page1Ctrl($scope, $http) {
      }

      function Page2Ctrl($scope, $http) {
      }
    </script>
  </body>
</html>

ページを変更したときにスクロールバーが表示されないようにするにはどうすればよいですか? 古いページが新しいページの下に落ちないようにしますか?

ありがとうございました！

4

1 に答える 1

1

position:absolute;アニメーション中に、アニメーション化された div にスタイルを与える必要がある可能性があります。

最初のテンプレートがまだフェードアウト アニメーションを実行している間に、2 番目のテンプレートが DOM に読み込まれています。position:absolute がなければ、最初のテンプレートが完全にフェードアウトして Angular がそれを削除するまで、自然にブロック スタッキングを開始します。

position:absolute を追加する場合は、どの親要素が position:relative または absolute を持つかに応じて、正しく配置するために "Top" 値をいじる必要がある場合があることに注意してください。

position:absolute クラスは、通常はアニメーション化された div に配置するか、アプリの構造に適したものに応じてアニメーション化クラスに配置できます。

于 2013-09-25T15:40:40.480 に答える