scorrimento tra transizione percorso angularjs

Question

Ho solo lavorato con angolare per circa una settimana, quindi mi scuso se il mio codice è una schifezza.

che sto cercando di creare un azione di scorrimento tra le transizioni di percorso. Posso creare l'effetto in una presentazione ma non tra le transizioni di percorso.

codice Comunque qui di seguito: Nav

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

view (s)

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

css

.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; 
} 

include

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

javascript:

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

progetto completa a https://github.com/arttay/blizz

Grazie

Answer 1

Per chiunque googleing questo ....

aggiungere le classi ng-entrano/ng-ferie /. ng-enter-active/.ng-leave-active per le tue classi css. Esempio

.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 ha anche qualche grande video su animazione se si desidera una in un'esercitazione approfondita

Answer 2

Le risposte sopra sono esatte ... ma vorrei aggiungere che hanno rotte con una barra finale:

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

si romperà le vostre transizioni ... angolare reindirizza immediatamente a '/ introduzione', che rompe la transizione. in modo da essere sicuri di utilizzare:

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

Mi ha portato come 5 ore per determinare finalmente il motivo per cui i miei transizioni non avrebbero funzionato .. quando i miei progetti di test e tutti gli esempi funzionava.

Answer 3

Se si utilizza 1.2.x angolare poi direttiva ngAnimate non è più necessario. Angular Animate utilizza attualmente .ng-enter e .ng-leave come hook per aggiungere le tue trasformazioni. L'articolo qui sotto ho trovato molto utile a conoscere il nuovo modo di fare animazioni proprio nel modo youre cercando di realizzare (animando le vie aka ogni parziale, che viene inserito nella direttiva ngview).

Animating AngularJS Apps: ngView