javascript - AngularJS Animation -
i trying implement angular js animations when view changes in app. reason can no animation @ all.
here 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 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 how implemented in html, implemented in index.html opposed 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 help!
you should utilize ng-animate="'animate'" instead of class='animate'
javascript angularjs animation
No comments:
Post a Comment