使用 AngularJS 和 CSS 动画的页面转换答案

【问题标题】：Page Transition with AngularJS and CSS Animations使用 AngularJS 和 CSS 动画的页面转换
【发布时间】：2013-09-25 23:40:40
【问题描述】：

我正在开发一个基本的 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>

如何防止在换页时出现滚动条？并防止旧页面低于新页面？

谢谢！

【问题讨论】：

您在代码中包含ngAnimate，您有什么理由不使用它？
是的。我正在使用 1.2RC。不再推荐使用 ngAnimate。
ngAnimate 现在包含在角核心中。你可以使用 <div ng-view ng-animate="... 之类的东西。

标签： angularjs css-animations

【解决方案1】：

您可能需要在动画期间为动画 div 赋予 position:absolute; 样式。

发生的情况是第二个模板正在加载到 DOM 中，而第一个模板仍在执行淡出动画。没有 position:absolute 他们会做自然的事情并开始块堆叠，直到第一个模板完全淡出并且 Angular 将其删除。

请记住，如果您添加 position:absolute，您可能还必须使用“Top”值来正确定位它，具体取决于哪个父元素具有 position:relative 或 absolute。

您可以将 position:absolute 类放在动画 div 上，也可以专门放在动画类上，具体取决于哪种方式更适合您的应用结构。

【讨论】：

我遇到了类似的问题，我可以通过将位置设置为绝对来解决它，但是我在 ngView 下有一个页脚，所以当视图的位置设置为绝对时，页脚将与它重叠。为什么我不能将视图的显示更改为inline 以使两个视图并排显示？
@rob 我刚刚找到了有关此页脚问题的解决方案。您可以添加“位置：绝对；”和'顶部：0;' '.classname.ng-leave' css 类的 css 属性。因此，只有离开的内容是绝对定位的，并且页脚正确显示在进入的内容下方（不是绝对定位的）。