我正在使用 ng-animate 来滑动应用 View ,所以每条路线都会滑动自己的 View ,这是我的简单代码:
html:
<div ng-view ng-animate class="slide"></div>
CSS:
/*Animations*/
.slide{
left:0;
}
.slide.ng-enter{
transition:0.15s linear all;
position:fixed;
z-index:inherit;
left:-100%;
height:inherit;
}
.slide.ng-leave{
transition:0.15s linear all;
position:fixed;
z-index:9999;
right:0;
}
.slide.ng-leave-active{
transition:0.15s linear all;
position:fixed;
right:-100%;
left:100%;
}
.slide.ng-enter-active{
transition:0.15s linear all;
left:0;
position:relative;
}
现在,我想知道,是否有办法将主页(主要“/”路径)从滑动中排除?
换句话说:有什么方法可以从 ng-animate 中排除路由?
最佳答案
这就是 ng-class
的用途。
只要路径发生变化,您就可以设置一个应用程序范围的变量 $rootScope.path 。
app.run(function ($rootScope, $location) {
$rootScope.$on("$locationChangeStart", function (event, next, current) {
$rootScope.path = $location.path();
});
});
然后,您决定通过该变量设置您的动画类
如果你只想在路径不是/
时设置class slide
,这样做
<div ng-view ng-class="{slide: path !== '/' }"></div>
通过这种方式,您无需触摸任何 Controller 。
完整演示在这里,http://plnkr.co/edit/rmu8oc7ycKzRaA2zv5JN?p=preview
顺便说一句,这使用 currant angularJS 版本,1.2.7
-------- 编辑(访问主页后动画)------
app.run(function ($rootScope, $location) {
$rootScope.$on("$locationChangeStart", function (event, next, current) {
if (!$location.path().match(/^\/?$/) && !$rootScope.mainVisitedOnce) {
$rootScope.mainVisitedOnce = true;
}
});
});
和
<div ng-view ng-class="{slide: mainVisitedOnce }"></div>
关于javascript - Angular js - 幻灯片 View 但不是主页 - ng-animate,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20869011/