Animations with Angular 1.2.0rc1

[lanceschi]

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

[dgsunesen]

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);
                }
                */
            });
        }]);
});

[nenebale]

@dgsunesen I used this version, hope it helps :) https://github.com/nenebale/ui-router/blob/master/release/angular-ui-router.js

[dgsunesen]

@nenebale - thanks a bunch! That did the job!

[nenebale]

No problem - @dgsunesen

Now we're all waiting for 0.3 :+1:

[renz45]

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.

[hrajchert]

@nenebale +1, that worked, I hope its merged soon, I wanted to use 0.2.7 that had controllerProvider as well

[tjphilli]

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!

[ninjatronic]

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

[lanceschi]

@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

[ninjatronic]

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

[lanceschi]

@ninjatronic no, sorry. I'm not part of the ui-router team. I'm using this one:

https://github.com/angular-ui/ui-router/tree/angular-1.2

[ghost]

Hello,

Anyone can tell me the plans to support Angular 1.2.7?

Thanks

[kennethlynne]

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

Source: http://stackoverflow.com/questions/19514445/how-can-i-use-ng-animate-with-ui-view-rather-than-ng-view

[gustavohenke]

+1, I'm also needing a update about this one.

[dlukez]

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

[timkindberg]

Curious how/when that happened. I've seen no commits or merges pertaining to animation or 1.2 support.

[benbenwilde]

+1, please fix

[anton-rodin]

+1 Please fix it, it's important

[nicolas]

+1 thanks

[marcghorayeb]

:+1:

[homerjam]

+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

[chriswep]

+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!

[benbenwilde]

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.

[chriswep]

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..

[homerjam]

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.

[timkindberg]

This all looks to be working now in 0.2.8. See the demo app: http://angular-ui.github.io/ui-router/sample/

[m4r71n]

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

[dlukez]

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.

[homerjam]

@m4r71n you might find this useful https://github.com/homerjam/angular-ui-router-anim-in-out

[timkindberg]

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/#/

[m4r71n]

@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