Angularjs 使用角度动画使用平移捕捉更改视图
我正在使用ngRoute更改视图，它将为ng视图加载一个新模板。新视图以类似平移的方式通过角度动画加载。但是，当新视图滑入时，它不在正确的位置上，这是可行的。动画完成后，将“捕捉”到位。 我已将代码上载到PLNKR： 我整个晚上都在试验姿势：相对、绝对、内在等等。 此外，搜索互联网（包括stackoverflow）也没有帮助 欢迎任何帮助或建议 谢谢，HT 附：守则：Angularjs 使用角度动画使用平移捕捉更改视图,angularjs,css,ng-animate,panning,Angularjs,Css,Ng Animate,Panning,我正在使用ngRoute更改视图，它将为ng视图加载一个新模板。新视图以类似平移的方式通过角度动画加载。但是，当新视图滑入时，它不在正确的位置上，这是可行的。动画完成后，将“捕捉”到位。 我已将代码上载到PLNKR： 我整个晚上都在试验姿势：相对、绝对、内在等等。 此外，搜索互联网（包括stackoverflow）也没有帮助 欢迎任何帮助或建议 谢谢，HT 附：守则： <!DOCTYPE html> <html ng-app="panningApp"> <head
<!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>
新视图位置不正确，因为新视图是放置在当前视图下的新块元素。播放动画时，有两个视图包含放置在彼此下方的div元素 动画完成后，上面的div元素将被删除，下面的元素将捕捉到顶部 我使用绝对定位使其工作： 平移应用程序 比格迪夫先生{ 高度：500px； 背景色：abc； 位置：相对位置； } .ng进入，.ng离开{ -webkit过渡：全立方贝塞尔0.250、0.460、0.450、0.940 1.5s； 过渡：全立方贝塞尔0.250、0.460、0.450、0.940 1.5s； 职位：继承； } .ng enter{ 顶部：0px； 左-100%； 不透明度：0； 位置：绝对位置； 宽度：100%； } .ng-enter.ng-enter-active{ 顶部：0px； 左：0px； 不透明度：1； 位置：绝对位置； 宽度：100%； } G.休假{ 顶部：0px； 左：0px； 不透明度：1； 位置：绝对位置； 宽度：100%； } .ng-LEFT.ng-LEFT-active{ 左：100%； 不透明度：0； 位置：绝对位置； 宽度：100%； } .集装箱{ 边框：1px虚线f00； } panningApp=angular.modulepanningApp[ngRoute，ngAnimate]； panningApp.config[$routeProvider，函数$routeProvider{ $routeProvider。 当/pag1{ templateUrl:page1.html }. 当/pag2{ templateUrl:page2.html }. 否则{ 重定向到：'/page1' }; }]; 益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智 准自我准自我准自我准自我准自我准自我准自我准自我准自我准自我准自我准自我
谢谢，这正是我需要的！