मार्ग संक्रमण के बीच रपट AngularJS

Question

मैं केवल लगभग एक सप्ताह कोणीय के साथ काम कर रहा है, तो मैं माफी माँगता हूँ अगर मेरे कोड बकवास है।

मैं मार्ग संक्रमण के बीच एक स्लाइडिंग कार्रवाई बनाने का प्रयास कर रहा हूँ। मैं एक स्लाइड शो में प्रभाव बना सकता हूं लेकिन रूट संक्रमण के बीच नहीं।

वैसे भी नीचे कोड: नव

<li><a ng-click="go('/')" class = "intro currentLink navLinks">Intro</a></li> 
<li><a ng-click="go('/why')" class = "why navLinks">Why</a></li> 
<li><a ng-click="go('/resume')" class = "resume navLinks">Res</a></li> 
<li><a ng-click="go('/qualified')" class = "qualified navLinks">How</a></li> 
<li><a ng-click="go('/contact')" class = "contact navLinks">Contact me</a></li> 

(रों) दृश्य

<div class = "pages"> 
    <div ng-view id="slides" ng-animate="'slide'"> 
     <!--inside main view--> 
    </div><!--end main view--> 
</div><!--end pages--> 

सीएसएस

.slide-leave-setup { 
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
} 
.slide-enter-setup { 
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
} 
.slide-enter-setup { 
    position: absolute; 
    left: 1300px; 
} 
.slide-enter-start { 
    left: 0; 
} 
.slide-leave-setup { 
    position: absolute; 
    left: -1700px; 
} 
.slide-leave-start { 
    right: 0; 
} 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.min.js"></script> 
<script src="http://code.angularjs.org/1.2.3/angular-route.min.js"></script> 
<script src="http://code.angularjs.org/1.1.2/angular-sanitize.js"></script> 
<script src="js/vendor/ui-bootstrap-custom-tpls-0.6.0.js"></script> 

शामिल 10

जावास्क्रिप्ट:

var app = angular.module('MyApp', ['ui.bootstrap', 'ngSanitize', 'ngRoute', 'ngAnimate']); 

https://github.com/arttay/blizz

पर पूर्ण परियोजना आप

Answer 1

धन्यवाद इस googleing किसी के लिए ....

जोड़े कक्षाएं एनजी से दर्ज/एनजी-छुट्टी /। ng-enter-active/.ng-leave-active आपके सीएसएस कक्षाओं में सक्रिय है। उदाहरण

.slide-animate.ng-enter, .slide-animate.ng-leave{ 
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
     transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s; 
} 


.slide-animate.ng-enter.ng-enter-active { 
position: absolute; 
left: 1300px; 
} 

.slide-animate.ng-enter { 
left: 0; 
} 

.slide-animate.ng-leave.ng-leave-active { 
position: absolute; 
left: -1700px; 
} 

.slide-animate.ng-leave { 
right: 0; 
} 

Egghead.io अगर आप गहराई ट्यूटोरियल

Answer 2

ऊपर उत्तर सही हैं में एक चाहते भी एनीमेशन पर कुछ महान वीडियो है ... लेकिन मैं जोड़ना होगा कि स्लैश के साथ होने मार्गों:

.when('/introduction/', ...) 

अपने संक्रमण को तोड़ने जाएगा ... कोणीय तुरंत '/ परिचय' जो संक्रमण टूट जाता है पर रीडायरेक्ट। इसलिए का उपयोग सुनिश्चित करें:

.when('/introduction', ...) 

मुझे 5 घंटे की तरह लिया अंत में निर्धारित करने के लिए क्यों मेरे संक्रमण कार्य नहीं करेगा .. अपने परीक्षण परियोजनाओं और सभी उदाहरण महान काम किया है।

Answer 3

आप कोणीय 1.2.x उपयोग कर रहे हैं तो ngAnimate निर्देश नहीं रह गया है की जरूरत है। कोणीय एनिमेट वर्तमान में .ng-enter और .ng-leave को आपके परिवर्तन जोड़ने के लिए हुक के रूप में उपयोग करता है। नीचे दिए गए लेख मैं अभी जिस तरह आप पूरा करने के लिए कोशिश कर रहा में एनिमेशन करने के नए तरीके के बारे में सीखने में बहुत उपयोगी पाया (कि प्रत्येक आंशिक उर्फ ​​मार्गों एनिमेट द्वारा ngview निर्देश में डाला जाता है)।

Animating AngularJS Apps: ngView