在AngularJS路线依赖的CSS网页过渡 [英] Route-Dependent CSS Page Transitions in AngularJS

问题描述

我是新来AngularJS，想实现路由相关的页面过渡。例如，我想根据页面的路线上向左滑动，向右滑动或褪色。

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.

我的'Plunker'下面通过听取$ routeChangeSuccess事件，然后应用过渡的风格特定CSS类的进入和离开视图实现这一点（由<一个启发href=\"http://phillippuleo.com/articles/scalable-approach-page-transitions-angularjs\">http://phillippuleo.com/articles/scalable-approach-page-transitions-angularjs):

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):

<一个href=\"http://plnkr.co/edit/ee4CHfb8kZC1WxtDM9wr?p=$p$pview\">http://plnkr.co/edit/ee4CHfb8kZC1WxtDM9wr?p=$p$pview

不过，调用$范围。$适用（）事件监听器使得AngularJS的在建$消化已经发出错误消息。但是，如果我不叫$范围。$适用（）的CSS类离开的视图未更新和动画不能正常工作。

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.

这是怎么回事呢？

推荐答案

我看了你的plunker。问题是，你使用类动画的意见的方式。

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

在该 $ routeChangeSuccess 事件被激发， ngView 已删除了类，你得到改变的机会之前，方向。您可以通过正在进行的错误，以便迅速地应用新的类，所以它不会被注意到，但你得到摘要覆盖它。

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.

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

声明一个动画为每个路由选项：

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

而只是将其添加到 ngView 像这样：

<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屋！