2015-05-29 9 views
5

मुझे कोणीय 1.2 -> 1.4 से अपडेट करने के बाद एनीमेशन के साथ समस्या है।कोणीय एनिमेट 1.4 बहुत तेज़

मैं दृश्य कंटेनर तत्व पर सीएसएस वर्ग को बदलकर पेज संक्रमण को एनिमेट करता हूं। मैं यूई-राउटर का उपयोग करता हूं और तत्व पर एनजी-क्लास निर्देश करता हूं। उपयोगकर्ता तीर कुंजियों (app.run() में ईवेंट श्रोता) के साथ नेविगेट करता है। यह $ rootScope पर वर्ग को एक स्ट्रिंग वेरिएबल 'navDirection' (बाएं/दाएं) के रूप में सेट करता है।

इसे अद्यतन करने के बाद ऐसा लगता है कि $ rootScope.navDirection एनीमेशन के बाद सेट है। इसलिए जब उपयोगकर्ता दिशा बदलता है तो एनीमेशन गलत होता है।

कोई भी सुझाव और/या टिप्पणियों की सराहना की जाती है!

index.html

<body ng-cloak ng-keydown="handleEvt($event)"> 
    <div class="page-wrapper page-wrapper--constrain" ng-class="{'page-wrapper--decorate' : decoratePageContent === true}"> 
     <div class="page-content group position-context"> 
      <div ui-view class="slide" ng-class="{'at-view-slide-in-left at-view-slide-out-right': navDirection == 'right', 'at-view-slide-in-right at-view-slide-out-left': navDirection == 'left'}"></div> 
     </div> 
    </div> 
</body> 

app.js

var app = angular.module('my-app', [ 
    'ui.router', 
    'ngAnimate' 
]); 

// ... 

app.run(function ($rootScope, navigationService) { 

    $rootScope.handleEvt = function(e) { 
     if ($rootScope.navVisible) { 
      switch (e.which) { 
       // right 
       case 37: 
        $rootScope.navDirection = "right"; 
        navigationService.navigate(navigationService.getCurrentPageIndex() - 1); 
        break; 
       // left 
       case 39: 
        $rootScope.navDirection = "left"; 
        navigationService.navigate(navigationService.getCurrentPageIndex() + 1); 
        break; 
      } 
     } 
    }; 

// ... 
+0

क्या आप इस समय काम कर रहे कामकाजी कोडपेन को स्थापित कर सकते हैं? –

उत्तर

0

ngAnimate संस्करण 1.4 में आंतरिक रूप से पुनर्संशोधित है। यह जावास्क्रिप्ट और सीएसएस एनिमेशन दोनों समानांतर नहीं चलाएगा। जावास्क्रिप्ट परिभाषित एनिमेशन में $ animateCSS इंजेक्शन करके एक ही प्रभाव अब प्राप्त कर सकता है। मूविंग एनीमेशन ट्रिगर किया जाता है हमेशा किसी लंबित या सक्रिय पेरेंट क्लास आधारित एनिमेशन (ngClass का उपयोग करके) समाप्त हो जाएगा।

संबंधित मुद्दे