Angular - GSAP轉換

Question

我對Angular相當陌生，所以請耐心等待。

這個角 - GSAP普拉克（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函數從page2.html過渡到page3.html。

.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

我想你可以根據新的/當前的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(); 
    }); 
    });