Angular js - slide views but not home page - ng-an-第2页回答

Angular js - slide views but not home page - ng-an

2019-04-06 12:19发布

i'm using ng-animate to slide the app views, so each route slides own view , this is my simple code:

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;
}

Now, i'm wondering , is there anyway to exclude the home page (main "/" route) from sliding?

In other terms: Any way to exclude a route from ng-animate?

标签： javascript css angularjs slide ng-animate

7条回答

Lonely孤独者°

2楼-- · 2019-04-06 13:15

You can build a controller that listens for route changes and sets a class accordingly. You will then be able to target the correct animation using CSS.

<body ng-controller="TranisitionCtrl" ng-class="currentRoute">
  <div ng-view ng-animate></div>
</body>

app.controller('TranisitionCtrl', function($scope) {
  $scope.$on('$routeChangeStart', function(ev, next, current) { 
    $scope.currentRoute = current.name;
  });
});

Please note $routeChangeStart has been changed to $locationChangeStart for more recent versions of angular.

I've answered another similar question here Two different animations for route changes

0人赞添加讨论(0) 举报

上一页 1 2

Angular js - slide views but not home page - ng-an

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间