滑動之間的路由轉換angularjs

我只與Angular工作了大約一個星期，所以我很抱歉如果我的代碼是廢話。滑動之間的路由轉換angularjs

我正試圖在路由轉換之間創建一個滑動操作。我可以在幻燈片中創建效果，但不能在路徑轉換之間創建效果。

無論如何下面的代碼：導航

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

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

包括

<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']);

在https://github.com/arttay/blizz

全部項目謝謝

來源

2013-11-28 Art Taylor

看看例如'NG-view'文檔...嘗試只設置類不'NG-animate' http://docs.angularjs.org/api/ngRoute.directive:ngView – charlietfl

那不是答案，但感謝您閱讀視圖文檔的提示，我一直主要關注動畫並且選擇一個。底部的一些很好的例子。 –

對於任何googleing這個....

添加類NG輸入/ NG休假/。 ng-enter-active/.ng-leave-active到你的css類。例

.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也有動畫一些偉大的視頻，如果你在深入的教程

來源

2013-11-29 23:20:22

在角度1.5.8上對我來說很有魅力 – saike