【发布时间】：2015-05-20 13:48:42
【问题描述】：
我正在使用 ngRoute 更改视图，它为 ng-view 加载新模板。新视图通过角度动画加载（以类似平移的方式）。这可行，但是当新视图滑入时，它不在正确的位置。动画完成后，它会“卡入”到位。 我已将代码上传到 PLNKR： http://plnkr.co/edit/uMCHGNKu2Eta0yx0uszP?p=info
我整个晚上都在尝试位置：相对、绝对、继承等。 搜索互联网（包括 stackoverflow）也没有帮助。
欢迎任何帮助或建议。
谢谢，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>
【问题讨论】：
标签： angularjs css ng-animate panning