Angular - GSAP 过渡

Question

我是 Angular 的新手，所以请多多包涵。

这个 Angular - GSAP plunk (http://embed.plnkr.co/EUNyny/) 演示了 3 个页面之间的转换，其中每个页面都有一个 show 函数 和一个 隐藏函数 处理进入和离开时的动画 （link 或后退按钮）。

//
// Directives
// ---------------------------
.directive('stage', function ($rootScope, $timeout) {
  return {
    restrict: 'A',
    link: function (scope, element) {
      TweenMax.set('#main', {perspective:500});
      scope.$on('$locationChangeStart', function (event, next, current) {
        scope.$broadcast('hide');
      });
    }
  }
})

我想要的是可以选择使用另一个转换（我们称之为 hide-new）而不是 hide 函数什么时候最适合我。

例如，当从 page2.html 转换到 page3.html 时使用 hide-new 函数。

.directive('page2', function ($rootScope) {

  var show = function (id, done) {
    var tl = new TimelineMax({onComplete: done});
    tl.add(TweenMax.from(id, .6, {rotationX: -90}));
    tl.play();
  };

  var hide = function (id, done) {
    var tl = new TimelineMax({onComplete: done});
    tl.add(TweenMax.to('#element4', .4, {y: 100, opacity: 0}));
    tl.play();
  };

  var hide-new = function (id, done) {
    var tl = new TimelineMax({onComplete: done});
    tl.add(TweenMax.to('#element4', .4, {y: 100, opacity: 0}));
    tl.play();
  };

  return {
    restrict: 'A',
    link: function (scope, element) {

      show(element);

      scope.$on('hide', function (event, next, current) {
        hide(element, function () {
          scope.$emit('changeRoute');
        });
      });
    }
  }
})

这样的事情可能吗？也许用 ng-if？

提前致谢

Answer 1

我猜你可以添加一个基于 new/current url:

的条件

scope.$on('$locationChangeStart', function (event, next, current) {
    if (next == 'test-next' && current == 'test-current') {
        scope.$broadcast('hide-new');
    }
    else {
        scope.$broadcast('hide');
    }
  });

之后，您只需添加另一个侦听器：

hideNewListener = scope.$on('hide-new', function (event, next, current) {
    hideNew(element, function () {
      scope.$emit('changeRoute');
      hideNewListener();
    });
  });

Angular - GSAP 过渡

Angular - GSAP Transitions

transitions

angularjs

angularjs-directive

gsap