使用 angular 动画通过平移捕捉改变视图

Question

我正在使用 ngRoute 更改视图，它会为 ng-view 加载新模板。新视图通过 angular 动画加载（以类似平移的方式）。这有效，但是当新视图在其中滑动时它不在正确的位置。动画完成后，它 'snaps' 到位。我已将代码上传到 PLNKR： http://plnkr.co/edit/uMCHGNKu2Eta0yx0uszP?p=info

我整个晚上都在尝试位置：相对、绝对、继承等。在互联网上搜索（包括 Whosebug）也没有帮助。

欢迎任何帮助或建议。

谢谢，HT。

ps。代码：

<!DOCTYPE html>
<html ng-app="panningApp">
<head>
    <meta charset="utf-8">
    <title>Panning App</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.3.14/angular-route.min.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.3.14/angular-animate.min.js"></script>
    <style>
        .bigdiv{
            height: 500px;
            background-color: #abc;
            position: inherit;

        }
          .ng-enter, .ng-leave {
              -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
              transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
              position:inherit;

          }
          .ng-enter {
              top: 0px;
              left: -100%;
              opacity: 0;
              position:inherit;
          }
          .ng-enter.ng-enter-active{
                top: 0px;
              left: 0px;
              opacity: 1;
              position:relative;
          }
          .ng-leave {
              top: 0px;
              left: 0px;
              opacity: 1;
              position:relative;
          }
          .ng-leave.ng-leave-active {
              left: 100%;
              opacity: 0;
              position:relative;
          }
          .container{
            border: 1px dashed #f00;
          }
    </style>
</head>
<body>
    <div class="container">
        <a href="#/pag1">pag1</a>
        <a href="#/pag2">pag2</a>
    </div>
    <div class="bigdiv">
        <ng-view></ng-view>
    </div>

    <script>
    panningApp = angular.module("panningApp", ["ngRoute", "ngAnimate"]);
    panningApp.config(["$routeProvider", function($routeProvider){
        $routeProvider.
            when("/pag1",{
                templateUrl: "page1.html"
            }).
            when("/pag2",{
                templateUrl: "page2.html"
            }).
            otherwise({
                redirectTo: '/page1'
            });
    }]);
    </script>
    <script type="text/ng-template" id="page1.html">
          <div class="container">
            Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
        </div>
    </script>
    <script type="text/ng-template" id="page2.html">
          <div class="container">
            Quasi ego id Quasi ego id Quasi ego id Quasi ego id Quasi ego id Quasi ego id Quasi ego id Quasi ego id 
        </div>
    </script>
</body>
</html>

Answer 1

新视图不在正确的位置，因为新视图是放置在当前视图下方的新块元素。当动画播放时，您有两个视图，其中包含 div 个元素，这些元素位于彼此下方。

当动画完成时，上面的 div 元素被移除，下面的元素吸附到顶部。

我使用绝对定位让它工作：

<!DOCTYPE html>
<html ng-app="panningApp">
<head>
 <meta charset="utf-8">
 <title>Panning App</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
 <script type="text/javascript" src="https://code.angularjs.org/1.3.14/angular-route.min.js"></script>
 <script type="text/javascript" src="https://code.angularjs.org/1.3.14/angular-animate.min.js"></script>
 <style>
  .bigdiv{
   height: 500px;
   background-color: #abc;
   position: relative;
   
  }
    .ng-enter, .ng-leave {
              -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
              transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
              position:inherit;
 
          }
          .ng-enter {
              top: 0px;
              left: -100%;
              opacity: 0;
              position:absolute;
              width:100%;
          }
          .ng-enter.ng-enter-active{
            top: 0px;
              left: 0px;
              opacity: 1;
              position:absolute;
              width:100%;
          }
          .ng-leave {
              top: 0px;
              left: 0px;
              opacity: 1;
              position:absolute;
              width:100%;
          }
          .ng-leave.ng-leave-active {
              left: 100%;
              opacity: 0;
              position:absolute;
              width:100%;
          }
          .container{
             border: 1px dashed #f00;
          }
 </style>
</head>
<body>
 <div class="container">
  <a href="#/pag1">pag1</a>
  <a href="#/pag2">pag2</a>
 </div>
 <div class="bigdiv">
  <ng-view></ng-view>
 </div>
 
 <script>
 panningApp = angular.module("panningApp", ["ngRoute", "ngAnimate"]);
 panningApp.config(["$routeProvider", function($routeProvider){
  $routeProvider.
   when("/pag1",{
    templateUrl: "page1.html"
   }).
   when("/pag2",{
    templateUrl: "page2.html"
   }).
   otherwise({
    redirectTo: '/page1'
   });
 }]);
 </script>
 <script type="text/ng-template" id="page1.html">
          <div class="container">
   Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
 </script>
 <script type="text/ng-template" id="page2.html">
          <div class="container">
   Quasi ego id Quasi ego id Quasi ego id Quasi ego id Quasi ego id Quasi ego id Quasi ego id Quasi ego id 
  </div>
 </script>
</body>
</html>

http://plnkr.co/edit/O7evrkXh8nMUOaUQfx69?p=preview

使用 angular 动画通过平移捕捉改变视图

Using angular animation to change view using panning snaps

css

panning

angularjs

ng-animate