代码之家 › 专栏 › 技术社区 › gogachinchaladze

角度不更新ng视图上的ng类

ng-view ng-animate angularjs javascript

gogachinchaladze · 技术社区 · 9 年前

我想要实现的是:当ngroute被更改时,我必须从当前视图中删除活动类,等待离开动画完成,然后将活动类添加到新视图中。

我已经在配置中设置了应用程序和路由。

var app = angular.module('app', ['ngAnimate', 'ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl:"home.html",
        reloadOnSearch:false
      })
      .when('/about-us', {
        templateUrl:"about.html",
        reloadOnSearch:false
      })
      .when('/contact', {
        templateUrl:"contact.html",
        reloadOnSearch:false
      })
      .otherwise({
          template : "<h1>None</h1><p>Nothing has been selected</p>"
      });
});

我有一个服务,我存储动画计时和布尔值,指示视图的可见性:

app.service('animationProperties', function () {
  this.animationTimings = {
    views: 1000
  };
  this.visibility = {
    view : false
  };
});

app.controller('MainCtrl', function ($scope, $window, $location, 
                                     animationProperties) {

  $scope.animationProperties = animationProperties;

  $scope.$on('$routeChangeStart',function () {
    animationProperties.visibility.view = false;
  });

  $scope.toggleActive = function(){
    $scope.animationProperties.visibility.view = !$scope.animationProperties.visibility.view;
  }
});

app.animation('.view', function($timeout, animationProperties) {
  return {
    enter: function(element, done) {
      $timeout(function () {
        animationProperties.visibility.view = true;
        $timeout(function () {
          done();
        }, animationProperties.animationTimings.views);//Wait to enter
      },animationProperties.animationTimings.views); //Wait for leave function
    },
    leave: function(element, done) {
      $timeout(function () {
        done();
      }, animationProperties.animationTimings.views);
    }
  }
});

这是 plunker

非常感谢您的帮助!!!

1 回复 | 直到 9 年前

gkalpak 9 年前

引用我自己的话 here :

在 $routeChangeStart ngClass 要删除 active
同时 $route 开始准备进入视图,包括获取其模板。
一旦一切就绪,它就会触发 $routeChangeSuccess ngView 开始交换两个视图。
在交换过程中, ngView公司 破坏了离开视图的范围,从这一点开始,范围的观察者停止。。。注视。

ngClass公司 要删除 忙碌的 班第一次访问路线时,动画会起作用,因为必须向服务器请求输入视图的模板(该模板提供 ngClass公司 是时候做它的工作了)。但是,当您访问以前访问过的路由时,模板已经缓存,转换速度很快。

app.decorator('$templateRequest', ($delegate, $timeout) => {
  const $templateRequest = (...args) => $delegate(...args).
    then(tmpl => $timeout().then(() => tmpl));
  Object.defineProperty($templateRequest, 'totalPendingRequests', {
    get: () => $delegate.totalPendingRequests,
    set: nv => $delegate.totalPendingRequests = nv,
  });
  return $templateRequest;
});

( Updated plnkr 1 )

ngClass公司 ,以便在销毁离开视图的范围之前立即应用类。这种指令的未优化、非生产就绪的crud版本可能如下所示:

app.directive('myClass', () => (scope, elem, attrs) => {
  scope.$watchCollection(attrs.myClass, newValue => {
    Object.keys(newValue).forEach(c => {
      if (newValue[c]) {
        elem.addClass(c);
      } else {
        elem.removeClass(c);
      }
    });
  });
});

( Updated plnkr 2

).
animationProperties.visibility.views )这触发了 ngClass公司
移除该类会触发CSS动画。
同时,有一个自定义的JavaScript动画( animation('.view') )将自身与CSS动画同步,然后设置回标志。
通过设置回标志,为进入的视图触发相反的CSS动画。

对于初学者来说,为什么同时使用CSS和JS动画?例如,您可以处理JS动画中的不透明度更改(假设您的实际设置更复杂,并且需要JS动画来实现其他效果)。

或者,您可以更轻松地使用基于自动添加/删除的纯CSS动画处理淡入/淡出 ng-enter ng-leave 类(只有4个小小的CSS规则:smiley:):

[ng-view].ng-enter {
  /* Wait for the leaving view to...leave, then start transitioning in. */
  transition: opacity 1s ease 1s;
}

[ng-view].ng-leave {
  /* Start transitioning out. */
  transition: opacity 1s ease;
}

[ng-view].ng-enter,
[ng-view].ng-leave.ng-leave-active {
  /*
   * At the beginning of the entering animation and
   * at the end of the leaving animation,
   * the view must be fully invisible.
   */
  opacity: 0;
}

[ng-view].ng-enter.ng-enter-active,
[ng-view].ng-leave {
  /*
   * At the end of the entering animation and
   * at the beginning of the leaving animation,
   * the view must be fully visible.
   */
  opacity: 1;
}

( Updated plnkr 3