AngularJS動畫與用戶界面路由器不工作

Question

我想通過AngularJS學習我的方式，目前試圖玩弄使用ui.router狀態轉換之間的動畫。無論我做什麼，都沒有動畫，國家只是在沒有轉變的情況下發生變化。

版本

angularJS v1.3.16 
angular-animate 1.4.1 
angular-ui-router 0.2.15 

我的JS

angular.module('myApp', [ 
'ui.router', 
'ngAnimate' 
]). 
config(function($stateProvider,$urlRouterProvider) { 
    $stateProvider 
     .state(
     "dashboard",{ 
     url: "/dashboard", 
     templateUrl: "dashboard.html", 
     } 
) 
     .state(
     "terminals",{ 
     url: "/terminals", 
     templateUrl: "terminals.html", 
     } 
) 
    $urlRouterProvider.otherwise("/dashboard") 
}); 

我的網頁上，我有

<div ui-view class="slide"></div> 

和提取從我的CSS

.slide { 
-webkit-transition: -webkit-transform .7s ease-in-out; 
-moz-transition: -moz-transform .7s ease-in-out; 
-o-transition: -o-transform .7s ease-in-out; 
transition: transform .7s ease-in-out; 
-webkit-transform: translateX(0); 
transform: translateX(0); 
} 

.slide.ng-enter { 
-webkit-transform: translateX(-100%); 
transform: translateX(-100%); 
} 

.slide.ng-enter.ng-enter-active, .slide.ng-leave { 
position: absolute; 
-webkit-transform: translateX(0); 
transform: translateX(0); 
} 

.slide.ng-leave.ng-leave-active { 
-webkit-transform: translateX(100%); 
transform: translateX(100%); 
} 

會感謝任何指示我即將出錯。

Answer 1

我在使用DJANGO作爲後端時也有同樣的戰鬥。當我爲角度路線製作一個動畫時，這個動畫就是「切半」。

因爲我使用expressjs + nodejs它不再發生。

我在這裏粘貼我使用的部分代碼。

非常重要的是使它成爲HTML5！

也有人在這個答案結束時使CSS錯開和延遲。

這是一個工作示例，所以如果您使用angular-route而不是ui.router，它將適用於您。另外我建議更新您的角度，以1.4 *

var shop = angular.module('shop', ['ngRoute', 'ngAnimate', 'ngTouch']); 

shop.config(['$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider) { 
     $locationProvider.html5Mode({ 
      enabled: true, 
      requireBase: false 
     }); 
     $routeProvider 
     .when('/', { 
      templateUrl: '/partials/index', 
      controller: 'indexController' 
     }) 
     .when('/cart', { 
      templateUrl: '/partials/cart', 
      controller: 'indexController' 
     }) 
     .when('/account',{ 
      templateUrl: '/account', 
      controller: 'profileController' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
    } 
]); 

HTML部分：

<div class="ng-view zipper ng-animate"></div> 

和CSS（ofcourse您可以在這裏把你的動畫，在我剛剛品嚐它我幫你） ：

.zipper.ng-animate { 
    transition:0.5s ease all; 
} 
.zipper.ng-enter { 
    opacity:0; 

} 

.zipper.ng-enter-stagger { 
    /* this will have a 100ms delay between each successive leave animation */ 
    transition-delay: 0.1s; 

    /* in case the stagger doesn't work then the duration value 
    must be set to 0 to avoid an accidental CSS inheritance */ 
    transition-duration: 0s; 
} 

.zipper.ng-enter.ng-enter-active { 
    transition-delay:0.6s; 
    opacity:1; 
    z-index:10; 
} 
.zipper.ng-leave { 
    opacity:1; 

} 
.zipper.ng-leave.ng-leave-active { 
    opacity:0; 
    z-index:9; 
}