Angular - GSAP 过渡答案

【问题标题】：Angular - GSAP TransitionsAngular - GSAP 过渡
【发布时间】：2017-06-13 08:17:22
【问题描述】：

我对 Angular 还很陌生，所以请多多包涵。

这个 Angular - GSAP plunk (http://embed.plnkr.co/EUNyny/) 演示了 3 个页面之间的转换，每个页面都有一个显示功能和一个隐藏功能处理进入和离开时的动画（链接或返回按钮）。

//
// 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？

提前致谢

【问题讨论】：

标签： angularjs angularjs-directive transitions gsap

【解决方案1】：

我猜你可以根据新的/当前的 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();
    });
  });

【讨论】：