Javascript AngularJS动画_Javascript_Angularjs_Animation

Javascript AngularJS动画

javascript angularjs animation

Javascript AngularJS动画,javascript,angularjs,animation,Javascript,Angularjs,Animation,当我的应用程序中的视图发生变化时，我尝试实现角度js动画。由于某种原因，我根本无法得到动画这是我的app.js： var myApp = angular.module('myApp', [ 'ngRoute', 'ngAnimate', 'categoryControllers' ]); //--------------------Controllers----------------------------// var categoryControllers = angula

当我的应用程序中的视图发生变化时，我尝试实现角度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'
  });
}]);

还有我的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%;
}

最后，我是如何在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>

谢谢你的帮助

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

动画类如何。我没有看到任何对“我的应用程序”的调用，或者你有意忽略了它？哎呀。。我想把“动画”类放在那里，而不是“ng范围”。复制粘贴失败，我在上面更正了它。为了简单起见，在这个问题上，我删掉了我的代码。对不起，错误的窗口。BRB.您是否尝试添加ng enter和ng LEVE，如投票答案所示？实际动画的代码在哪里？从我一直阅读的内容来看，ng animate指令从1.2版开始就被弃用了，现在它内置了类。但我很可能是错的。前任：