角動畫1.3 - > 1.4

我剛剛從Angular 1.3遷移到1.4.7，我知道會有動畫的突破變化，但我堅持如何解決它們。這裏是我想要完成的一個小小的總結。角動畫1.3 - > 1.4

我有5個步驟的對話框（類似於表單註冊）。當用戶點擊「下一步」，當前和下一網頁動畫應該從右到左，因爲這樣的：

  [VIEWPORT] 

     <---Page 1 <--- Page 2

反之亦然因爲當用戶點擊「返回」。所以我完成這個的方式是通過使用Angular的進入/離開動畫功能來添加一個類到頁面div來觸發CSS動畫。這裏是爲離開的div和正在進入的div添加「on-next」或「on-back」的Javascript。

(function() { 
'use strict'; 

/** 
* @ngdoc animation 
* @name AnimateWizard 
* @description 
* Animation for a wizard when moving to the next/previous page. 
*/ 
angular.module('wizard.common').animation('.animate-wizard', ['AnimatedWizardService', function(wizardService) { 
    var animate = function(element) { 
     //reset the element's animation classes first since there can be leftovers from previous animations 
     wizardService.removeAnimations(element); 
     wizardService.addAnimation(element); 
    }; 

    return { 
     enter: enter, 
     leave: leave 
    }; 

    function enter(element, done) { 
     animate(element); 
     done(); 
    } 

    function leave(element, done) { 
     animate(element); 
     done(); 
    } 
}]); 
/** 
* @ngdoc service 
* @name AnimatedWizardService 
* @description 
* Stores the class that is required to animate a wizard's steps. 
*/ 
angular.module('wizard.common').service('AnimatedWizardService', function() { 
    var _animationClass; 
    var validAnimationClasses = ['on-next', 'on-back']; 

    return { 
     //Controller calls this when the user hits "next" or "back" 
     //`klass` can be "on-next" or "on-back" depending on which way we want to animate the pages 
     setClass : function(klass) { 
      if(validAnimationClasses.indexOf(klass) !== -1) { 
       _animationClass = klass; 
      } else { 
       //Developer error - fail hard! 
       throw new Error(klass + ' is not a valid animation.'); 
      } 
     }, 
     addAnimation : function(element) { 
      angular.element(element).addClass(_animationClass); 
     }, 
     removeAnimations : function(element) { 
      angular.element(element).removeClass(validAnimationClasses.join(' ')); 
     } 
    }; 
}); 
})();

這裏是CSS

.animate-wizard { 
    position: absolute; 
    z-index: 0; 
    width: 100%; 
} 

.animate-wizard.ng-enter { 
    will-change: transform; 
    -webkit-animation: wizardPageOnNextEnter 500ms ease both; 
    -moz-animation: wizardPageOnNextEnter 500ms ease both; 
    animation: wizardPageOnNextEnter 500ms ease both; 

    &.on-next { 
     -webkit-animation: wizardPageOnNextEnter 500ms ease both; 
     -moz-animation: wizardPageOnNextEnter 500ms ease both; 
     animation: wizardPageOnNextEnter 500ms ease both; 
    } 

    &.on-back { 
     -webkit-animation: wizardPageOnBackEnter 500ms ease both; 
     -moz-animation: wizardPageOnBackEnter 500ms ease both; 
     animation: wizardPageOnBackEnter 500ms ease both; 
    } 
} 

.animate-wizard.ng-leave { 
    will-change: transform; 
    -webkit-animation: wizardPageOnNextLeave 500ms ease both; 
    -moz-animation: wizardPageOnNextLeave 500ms ease both; 
    animation: wizardPageOnNextLeave 500ms ease both; 

    &.on-next { 
     -webkit-animation: wizardPageOnNextLeave 500ms ease both; 
     -moz-animation: wizardPageOnNextLeave 500ms ease both; 
     animation: wizardPageOnNextLeave 500ms ease both; 
    } 

    &.on-back { 
     -webkit-animation: wizardPageOnBackLeave 500ms ease both; 
     -moz-animation: wizardPageOnBackLeave 500ms ease both; 
     animation: wizardPageOnBackLeave 500ms ease both; 
    } 
} 

//Page 1 leaving to the left 
@keyframes wizardPageOnNextLeave { 
    from{} to{ -moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); } 
} 
@-webkit-keyframes wizardPageOnNextLeave { 
    from{} to{ -webkit-transform: translateX(-100%); } 
} 
@-moz-keyframes wizardPageOnNextLeave { 
    from{} to{ -moz-transform: translateX(-100%); } 
} 
//Page 2 entering from the right 
@keyframes wizardPageOnNextEnter { 
    from{ -webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } 
} 
@-webkit-keyframes wizardPageOnNextEnter { 
    from{ -webkit-transform: translateX(100%); } 
} 
@-moz-keyframes wizardPageOnNextEnter { 
    from{ -moz-transform: translateX(100%); } 
} 
//Page 2 leaving to the right 
@keyframes wizardPageOnBackLeave { 
    from{} to{ -webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } 
} 
@-webkit-keyframes wizardPageOnBackLeave { 
    from{} to{ -webkit-transform: translateX(100%); } 
} 
@-moz-keyframes wizardPageOnBackLeave { 
    from{} to{ -moz-transform: translateX(100%); } 
} 
//Page 1 entering from the left 
@keyframes wizardPageOnBackEnter { 
    from{ -moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); } 
} 
@-webkit-keyframes wizardPageOnBackEnter { 
    from{ -webkit-transform: translateX(-100%); } 
} 
@-moz-keyframes wizardPageOnBackEnter { 
    from{ -moz-transform: translateX(-100%); } 
}

最後，這裏是一些示例HTML

<div> 
    <div class="animate-wizard" ng-if="currentStep === 1"> 
    <div class="animate-wizard" ng-if="currentStep === 2"> 
    <div class="animate-wizard" ng-if="currentStep === 3"> 
    <div class="animate-wizard" ng-if="currentStep === 4"> 
</div>

這所有的工作，但現在我不知道要改變什麼/我是否應該剛剛開始。我已經看過角度嚮導形式的例子，但其中大多數只是單向動畫。任何想法，將不勝感激！謝謝。

來源

2015-10-19 exk0730

找到答案！所以問題是「ng-enter」在它的動畫中從未被添加到div中。我需要做到這一點：

return { 
    enter : function(element, done) { 
     $animateCss(element, { 
      event: 'ng-enter' 
     }).start().done(done); 
    }, 
    leave .... 
}

和明顯的假離開事件。奇蹟般有效！

來源

2015-10-19 19:45:17 exk0730

角動畫1.3 - > 1.4

回答

相關問題