AngularJS 中与路由相关的 CSS 页面转换 [英] Route-Dependent CSS Page Transitions in AngularJS

问题描述

我是 AngularJS 的新手，想实现依赖于路由的页面转换.例如，我希望页面根据路线向左滑动、向右滑动或淡入淡出.

我下面的Plunker"通过监听 $routeChangeSuccess 事件，然后将过渡样式特定的 CSS 类应用于进入和离开视图(灵感来自 http://phillippuleo.com/articles/scalable-approach-page-transitions-angularjs):

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

然而，在事件侦听器中调用 $scope.$apply() 会使 AngularJS 发出错误消息$digest already in progress".但是如果我不调用 $scope.$apply() 离开视图的 CSS 类不会更新并且动画不能正常工作.

这里发生了什么?

解决方案

我查看了你的 plunker.问题在于您使用类为视图设置动画的方式.

当 $routeChangeSuccess 事件被触发时，ngView 在你有机会改变方向之前已经移除了这个类.您通过如此快速地应用新类来覆盖它，因此它不会被注意到，但随后您会收到正在处理的摘要错误.

我的解决方案(plunker):

我想出了一个指令:

app.directive('animClass',function($route){返回 {链接:功能(范围，榆树，属性){var enterClass = $route.current.animate;elm.addClass(enterClass);scope.$on('$destroy',function(){elm.removeClass(enterClass);elm.addClass($route.current.animate);})}}});

为每条路线声明一个 animate 选项:

app.config(function($routeProvider) {$routeProvider.当(/page1"，{templateUrl: "page1.html",控制器:Page1Ctrl"，动画:向左滑动"}).当(/第2页"，{templateUrl: "page2.html",控制器:Page2Ctrl"，动画:向右滑动"}).除此以外({重定向到:/page1"});});

然后将它添加到 ngView 就像这样:

CSS:

.view {宽度:100%；填充左:1em；位置:绝对；顶部:0；左:0；}.slideLeft.ng-enter, .slideLeft.ng-leave, .slideRight.ng-enter, .slideRight.ng-leave {-webkit-transition:all 1s;过渡:全1；}.slideLeft.ng-输入{左:100%；}.slideLeft.ng-enter.ng-enter-active {左:0;}.slideLeft.ng-leave.ng-leave-active {左:-100%；}.slideRight.ng-输入{左:-100%；}.slideRight.ng-enter.ng-enter-active {左:0;}.slideRight.ng-leave.ng-leave-active {左:100%；}

I am new to AngularJS and would like to implement route dependent page transitions. For example, I would like the page to slide left, slide right or fade depending on the route.

My 'Plunker' below achieves this by listening to the $routeChangeSuccess event and then applying a transition style specific CSS class to the entering and leaving view (inspired by http://phillippuleo.com/articles/scalable-approach-page-transitions-angularjs):

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

However, the call to $scope.$apply() in the event listener makes AngularJS issue an error message '$digest already in progress'. But if I don't call $scope.$apply() the CSS class of the leaving view is not updated and the animation does not work correctly.

What is going on here?

解决方案

I looked in your plunker. The problem is with the way you use classes to animate your views.

When the $routeChangeSuccess event is fired, ngView had already removed the class before you get the chance of changing the direction. You override it by applying the new class so quickly so it would not be noticed but then you get the digest in progress error.

My solution (plunker):

I came up with a directive:

app.directive('animClass',function($route){
  return {
    link: function(scope, elm, attrs){
      var enterClass = $route.current.animate;
      elm.addClass(enterClass);
      scope.$on('$destroy',function(){
        elm.removeClass(enterClass);
        elm.addClass($route.current.animate);
      })
    }
  }
});

Declare an animate option for each route:

app.config(function($routeProvider) {
  $routeProvider.
    when("/page1", {
      templateUrl: "page1.html",
      controller: "Page1Ctrl",
      animate: "slideLeft"
    }).
    when("/page2", {
      templateUrl: "page2.html",
      controller: "Page2Ctrl",
      animate: "slideRight"
    }).
    otherwise({
      redirectTo: "/page1"
    });
});

And just add it to ngView like so:

<div ng-view ng-controller="ViewCtrl" anim-class class="view"></div>

css:

.view {
    width: 100%;
    padding-left: 1em;
    position:absolute;
    top: 0;
    left: 0;
}

.slideLeft.ng-enter, .slideLeft.ng-leave, .slideRight.ng-enter, .slideRight.ng-leave  {
    -webkit-transition:all 1s;
    transition:all 1s;
}

.slideLeft.ng-enter {
    left:100%;
}

.slideLeft.ng-enter.ng-enter-active {
    left:0;
}

.slideLeft.ng-leave.ng-leave-active {
    left:-100%;
}

.slideRight.ng-enter {
    left:-100%;
}

.slideRight.ng-enter.ng-enter-active {
    left:0;
}

.slideRight.ng-leave.ng-leave-active {
    left:100%;
}

这篇关于AngularJS 中与路由相关的 CSS 页面转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！