Closed lanceschi closed 10 years ago
Already did (I use require.js):
app.js
/*global define*/
define([
'angular',
'angularAnimate',
'angularUIRouter',
'controllers/controllers'
], function (ng) {
'use strict';
return ng.module('myApp', ['ui.router', 'ngAnimate', 'myApp.controllers']);
});
uiRoutes.js
define(['angular', 'app'], function(ng, app) {
'use strict';
return app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('customers', {
url: '/customers',
templateUrl: 'src/views/customers.html'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'src/views/dashboard.html'
});
}]);
});
controllers.js
/*global define*/
define(['angular'], function(ng) {
'use strict';
return ng.module('myApp.controllers', [])
.controller('NavigationController', ['$scope', '$rootScope', '$timeout', function($scope, $rootScope, $timeout) {
var transition = {};
$scope.lars = "Hej med dig, Lars!";
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
transition.toPage = fromState.url !== toState.url;
/* -- OLD TRANSITION STUFF --
if (transition.toPage) {
$timeout(function() {
ng.element(document.getElementsByClassName(toState.name + '-links')).addClass('is-active');
},10);
}
*/
});
}]);
});
@dgsunesen I used this version, hope it helps :) https://github.com/nenebale/ui-router/blob/master/release/angular-ui-router.js
@nenebale - thanks a bunch! That did the job!
No problem - @dgsunesen
Now we're all waiting for 0.3
:+1:
I think your issue with the 1.2 branch is that you're changing the transition class after the state has already changed (on the $stateChangeSuccess event). I wonder if this behavior will hold true for the official release? Oh well, I'm glad you got it figured out.
@nenebale +1, that worked, I hope its merged soon, I wanted to use 0.2.7 that had controllerProvider as well
Hey what is the current status of this? Looks like ui-router is on 0.2.7 and Angular is on 1.2.5. Do I still need to use special version of these libraries? I'm struggling to get ui-view animating properly and came upon this thread. Thanks!
Hi guys,
Is there a plunker/fiddle to demonstrate how to use ngAnimate with ui-view on angular 1.2.x? I'm also trying to get this working but not having any luck. I'm using the css from @renz45's comment, my ui-view looks like:
<div ui-view id="topElement" class="slide-left">
</div>
and I have declared ngAnimate as a dependency for the angular app.
Thanks
@ninjatronic your HTML is correct. I'm using ui-router v1.2 branch flawlessly with angular 1.2.3. Check if ./libs/angular/1.2.x/angular-animate.min.js is correctly included in your webapp.
Please have a try with this simplier css and let me know. Eventually hit F12 on Chrome and read console msgs.
<style>
.ngPartialSlideReveal.ng-enter {
-webkit-transition: 0.5s linear all;
-moz-transition: 0.5s linear all;
-o-transition: 0.5s linear all;
transition: 0.5s linear all;
opacity: 0.5;
position: relative;
opacity: 0;
top: 10px;
}
.ngPartialSlideReveal.ng-enter-active {
top: 0;
opacity: 1;
}
</style>
The below HTML markup should suffice!
<div ui-view class="ngPartialSlideReveal"></div>
Cheers, Luca
Hi @lanceschi
I was using the release build of ui-router - I switched to the version here and it works.
Any idea when this will be released?
Cheers
@ninjatronic no, sorry. I'm not part of the ui-router team. I'm using this one:
Hello,
Anyone can tell me the plans to support Angular 1.2.7?
Thanks
In my opinion this is high priority.
Until the official release is out, this pastebin solved it for me: http://pastebin.com/raw.php?i=hfSpURL8
+1, I'm also needing a update about this one.
This looks to be fixed in the latest master, although I don't think other directives on the ui-view element (e.g. ng-class) will work yet
Curious how/when that happened. I've seen no commits or merges pertaining to animation or 1.2 support.
+1, please fix
+1 Please fix it, it's important
+1 thanks
:+1:
+1
Curious that the docs/faq now state that 1.2 animation is supported, yet this isn't the case?
Also the 1.2 branch has gone!
This is the version I'm using, built from the 1.2 branch: http://pastebin.com/S7CX0zcb
+1
why removing the 1.2 branch without merging it?
would very much like to use ui-router 0.2.7. thanks for the great work!
Looks like this is fixed with UI Router 0.2.8. I'm using AngularJS v1.2.7.
For an example, just add the "slide" class to your ui-view
<div ui-view class="slide">
And use the following css for your animation.
.slide {
-webkit-transition: -webkit-transform .7s ease-in-out;
-moz-transition: -moz-transform .7s ease-in-out;
-o-transition: -o-transform .7s ease-in-out;
transition: transform .7s ease-in-out;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide.ng-enter {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide.ng-enter.ng-enter-active, .slide.ng-leave {
position: absolute;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide.ng-leave.ng-leave-active {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
Additionally, some animations seemed to have some weird behavior because of $uiViewScroll. I worked around it by adding autoscroll="false" to my ui-view element.
thanks for the hint with $uiViewScroll. is this a (known) bug? what effect does autoscroll have on on the ui-view element (= in what way does it autoscroll the element)?
apart from that it seems to be working mostly..
I think the unwanted scrolling behaviour occurs when $anchorScroll() is called - this resets the scroll position to the top even though this may not be desired - I removed it in the version I pasted above (would have made a PR but 1.2 branch vanished). Haven't tried it yet but autoscroll="false"
is a good tip, thanks.
This all looks to be working now in 0.2.8. See the demo app: http://angular-ui.github.io/ui-router/sample/
Could please anybody create a working example with 0.2.8 and two different sliding-animations like @arush mentioned in his comment https://github.com/angular-ui/ui-router/issues/320#issuecomment-25868169 ? Thanks
It's my understanding that the sliding animation still won't work because the code is backwards compatible and won't compile the ui view element properly
Sent from my iPhone
On 21/01/2014, at 8:07 AM, m4r71n notifications@github.com wrote:
Could please anybody create a working example with 0.2.8 and two different sliding-animations like @arush mentioned in his comment #320 (comment) ? Thanks
— Reply to this email directly or view it on GitHub.
@m4r71n you might find this useful https://github.com/homerjam/angular-ui-router-anim-in-out
Also just updated the FAQ with a working plunkr: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-animate-ui-view-with-ng-animate
Also the sample now has working 1.2 animations as well: http://angular-ui.github.io/ui-router/sample/#/
@homerjam thanks for your animation directive but at the moment i'm not sure if it is useful for me.
As this issue is now closed i created this: https://groups.google.com/d/topic/angular-ui/h_ETkSq2N4k/discussion
Hi,
it seems animations don't work at all with the new release of Angular 1.2.0rc1. Most probably a fix is needed.
Great job btw.
Cheers, Luca