AngularJS动画

Question

I am trying to implement angular js animations when the view changes in my app. 当我的应用程序视图更改时，我正在尝试实现角度js动画。 For some reason I can get no animation at all. 由于某种原因，我根本无法获得动画。

Here is my app.js: 这是我的app.js：

var myApp = angular.module('myApp', [
  'ngRoute',
  'ngAnimate',
  'categoryControllers'
]);

//--------------------Controllers----------------------------//

var categoryControllers = angular.module('categoryControllers', []);

categoryControllers.controller('DataController', ['$scope', '$http','$routeParams',    function($scope, $http, $routeParams) {
  $http.get('json/data.json').success(function(data) {
    $scope.project = data;
    $scope.currentCat = $routeParams.cat;
    $scope.currentEx = $routeParams.exId;
  });

}]);

//---------------------Routing----------------------------//

myApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider
  .when('/list', {
    templateUrl: 'partials/list.html',
    controller: 'DataController'
  })
  .when('/splash', {
    templateUrl: 'partials/splash.html',
    controller: 'DataController'
  })
  .when('/:cat', {
    templateUrl: 'partials/details.html',
    controller: 'DataController'
  });
}]);

And my CSS: 而我的CSS：

.animate-enter, 
.animate-leave
{ 
    -webkit-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
} 

.animate-enter {
    left: 100%;
}
.animate-enter.animate-enter-active {
    left: 0;
}

.animate-leave {
    left: 0;
}
.animate-leave.animate-leave-active{
    left: -100%;
}

And finally how I implemented it in my HTML, I only implemented it in the index.html as opposed to the partials. 最后，我是如何在HTML中实现它的，我只在index.html中实现了它，而不是partials。

  <script src="lib/angular/angular-animate.min.js"></script>

  <script src="js/app.js"></script>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="animate" ng-view></div>
</body>
</html>

Thanks for any help! 谢谢你的帮助！

Answer 1

您应该使用ng-animate =“'animate'”而不是class ='animate'

AngularJS动画

问题描述

1 个解决方案

解决方案1
0 2014-06-24 09:43:15

AngularJS动画

问题描述

1 个解决方案

解决方案1 0 2014-06-24 09:43:15

解决方案1
0 2014-06-24 09:43:15