Angular 1.2.12和ng-view動畫

我在使用Angular動畫化路線變化時遇到了令人沮喪的問題。沒有動畫，並且在一些配置中，我嘗試了以下各種在線資源，這些類閃爍到元素上，而其他元素（讀取：大多數）類甚至不會應用到元素上。Angular 1.2.12和ng-view動畫

這裏是我的index.html

<!doctype html> 
<html> 
    <head> 
     <title>Drop Calculator</title> 
     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
     <link rel="stylesheet" type="text/css" href="css/animate.css"> 

     <!-- LessCSS --> 
     <link rel="stylesheet/less" type="text/css" href="css/main.less"> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.2/less.min.js"></script> 
    </head> 
    <body ng-app="DropCalculator" ng-controller="MainCtrl"> 
     <main class="container"> 
      <vl-keypad></vl-keypad> 
      <div ng-view class="animate"></div> 
     </main> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script> 
     <script src="http://code.angularjs.org/1.2.12/angular-animate.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.js"></script> 
     <script src="js/app.js"></script> 
     <script src="js/directives.js"></script> 
     <script src="js/services.js"></script> 
     <script src="js/controllers.js"></script> 
    </body> 
</html>

而且animate.css

.animate-ng-enter, .animate-ng-leave { 
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; 
} 
.animate-ng-enter { 
    -webkit-transform:translateX(100%); 
} 
.animate-ng-enter.ng-enter-active { 
    -webkit-transform:translateX(0%); 
} 
.animate-ng-leave.ng-leave-active { 
    -webkit-transform:translateX(-100%); 
}

app.js

angular.module('DropCalculator', ['ngAnimate', 'ngRoute']) 
.config(['$routeProvider', function($routeProvider){ 
    $routeProvider 
    .when('/', { 
     templateUrl : 'partials/home.html' 
    }) 
    .when('/results', { 
     templateUrl : 'partials/results.html' 
    }) 
    .otherwise({ 
     redirectTo : '/' 
    }) 
}])

路由變化就好了，但是動畫不播放。我甚至不認爲動畫類適用於這些元素。我嘗試了不同的變體，其中class="animate"屬性無效。我也嘗試過不同的CSS屬性。

這令人沮喪！有任何想法嗎？

來源

2014-02-20 Phix

你的Html和routeprovider是好的，檢查該CSS！我希望它有幫助

.animate.ng-enter, 
.animate.ng-leave { 
    position: absolute; 
} 

.animate.ng-enter { 
    -moz-transition: ease-out all 0.3s 0.4s; 
    -o-transition: ease-out all 0.3s 0.4s; 
    -webkit-transition: ease-out all 0.3s 0.4s; 
    transition: ease-out all 0.3s 0.4s; 
} 


.animate.ng-leave { 
    -moz-transition: 0.3s ease-out all; 
    -o-transition: 0.3s ease-out all; 
    -webkit-transition: 0.3s ease-out all; 
    transition: 0.3s ease-out all; 
} 

.animate.ng-enter, 
.animate.ng-leave.ng-leave-active { 
    left: 2em; 
    opacity: 0; 
} 

.animate.ng-leave, 
.animate.ng-enter.ng-enter-active { 
    left: 0; 
    opacity: 1; 
}

來源

2014-02-20 14:13:48

Angular 1.2.12和ng-view動畫

回答

相關問題