Hi!
I'm struggling with transition effect between different views.
Everything seems to be fine but only till somebody won't click menu (change
view) before previous animation ends.
If you'll use navigation before css transition is finished it'll affect
that `ngView` html element will be duplicated and then browser console
throwing error: `undefined in not a function` in angular-animate.js in line
1348.
At this place in angular-animate.js you can find:
forEach(animationsToCancel, function(operation) {
operation.cancel(); // this is our undefined
});
This issue you can see *here <http://demo3.grafofaktura.pl/#/> *when you'll
quickly switch between Dashboard and Users.
Appreciate any help!
*JS*
var app = angular.module('demo3', ['ngAnimate', 'ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/views/view-dashboard.html',
// controller: 'dsbhController'
}).when('/dashboard', {
templateUrl: '/views/view-dashboard.html',
}).when('/users', {
templateUrl: '/views/view-users.html',
});
});
*HTML*
<!DOCTYPE html>
<html ng-app="demo3">
<head>
<!-- ... -->
</head>
<body class="template" ng-controller="TemplateController as Template"
ng-class="{'on': Template.loged_in}">
<!-- ... -->
<div class="mainFlexCont" ng-class="{'open' :
Template.isMenuOpen}">
<left-menu class="menuFlexCont menu"></left-menu>
<div class="contentFlexCont animate-view" ng-view></div>
</div>
<!-- global JS -->
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular-animate.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular-route.js"></script>
<!-- ... -->
<script src="js/app/app.js" type="text/javascript"></script>
</body>
</html>
*CSS*
.animate-view.ng-enter, .animate-view.ng-leave {
flex: none;
position: absolute;
top: 0;
left: 40px;
width: calc(100% - 40px);
-webkit-transition: transform .4s ease-out;
-moz-transition: transform .4s ease-out;
-ms-transition: transform .4s ease-out;
transition: transform .4s ease-out;
overflow: hidden;
}
.open .animate-view.ng-leave,
.open .animate-view.ng-enter{
left: 180px;
width: calc(100% - 180px);
}
.animate-view.ng-enter{
-webkit-transform: translate(100%,0);
-moz-transform: translate(100%,0);
-ms-transform: translate(100%,0);
transform: translate(100%,0);
}
.animate-view.ng-enter.ng-enter-active {
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0);
}
.animate-view.ng-leave{
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0);
}
.animate-view.ng-leave.ng-leave-active {
-webkit-transform: translate(-100%,0);
-moz-transform: translate(-100%,0);
-ms-transform: translate(-100%,0);
transform: translate(-100%,0);
}
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
