Угловая анимация 1.3 -> 1.4

Question

Я только недавно перешел из Angular 1.3 в 1.4.7, и я знал, что произойдут изменения в анимации, но я застрял в том, как их исправить. Вот небольшое резюме того, что я пытаюсь выполнить.

У меня есть диалог с 5 шагами (вроде регистрации формы). Когда пользователь нажимает кнопку «Далее», текущая и следующая страница должна анимировать справа налево, как таковой:

  [VIEWPORT] 

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

наоборот для того, когда пользователь нажимает «назад». Таким образом, я достиг этого, используя функцию анимации входа/отпуска Angular, чтобы добавить класс в div страницы, который будет запускать анимацию CSS. Вот Javascript, который добавил либо «on-next», либо «back-back» в div, который уходил, и div, который входил.

(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> 

Это все работало, но теперь я не уверен, что нужно изменить/если я должен просто начните сначала. Я видел примеры угловых магических форм, но большинство из них просто оживляют один путь. Любые идеи были бы хорошы! Благодарю.

Answer 1

Найден ответ! Поэтому проблема заключалась в том, что «ng-enter» никогда не добавлялось в div во время анимации. Мне нужно было это сделать:

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

и, очевидно, «ng-leave» для случая выхода. Работает как шарм!