Skip to content

Ui-view animation issue with Angular v1.2.13 #908

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
lanceschi opened this issue Feb 25, 2014 · 8 comments
Closed

Ui-view animation issue with Angular v1.2.13 #908

lanceschi opened this issue Feb 25, 2014 · 8 comments

Comments

@lanceschi
Copy link

Hi,

ui-view animations don't work at all with the recent Angular v1.2.13. I gave it a try this morning. Everything behaves as expected with the preceding Angular v1.2.12. I'm using master branch ui-router v0.2.8.

Any clue?

Thanks,
Luca
@arush
Copy link

arush commented Mar 3, 2014

I've noticed some changes here too, but most of my animations are still working... how are you applying the animation classes?

@lanceschi
Copy link
Author

Today I gave a try also to angular v1.2.14 and the ui-view animation issues are still there. The animations don't work. The last working angular version for me is angular v1.2.12.

@arush: here's an example of html & css

<div ui-view class="ngPartialSlideReveal"></div>

.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;
  position: relative;
  opacity: 0;
  top: 10px;
}

.ngPartialSlideReveal.ng-enter-active {
  top: 0;
  opacity: 1;
}
.ngPartialSlideReveal.ng-leave {
  width: 100%;  
}

.ngPartialSlideReveal.ng-leave.ng-leave-active {
  width: 0;
}

@christopherthielen
Copy link
Contributor

#858 is a pull request fixing a bunch of ui-view issues. It refactored a lot of animation code. Might want to give it a shot with angular 1.2.13 / 14

@lanceschi
Copy link
Author

@christopherthielen: thanks for your advice. I git cloned locally the last master branch an hour ago and grunt built it, although #858 has been merged it doesn't fix ui-view animation issues with angular v1.2.13/14

@meenie
Copy link
Contributor

meenie commented Mar 6, 2014

@lanceschi #858 animations do work with v1.2.13/14 - Have a look at this plnkr: http://plnkr.co/edit/I5z1bHkDMhu9fPoyeVU8?p=preview - The angular-ui-router I've dropped in is built from master about 30 seconds ago. If you click on the Go Test 1/2 buttons or 'Show?' button it will animate. If you click the 'Animate?' button it toggles between animations and no animations. You'll also notice that the uiView has ngIf, ngRepeat, and ngClass directives on it.

@meenie
Copy link
Contributor

meenie commented Mar 7, 2014

Closing. If #858 didn't fix the issue you are having please reopen :).

@meenie meenie closed this as completed Mar 7, 2014
@richardvanbergen
Copy link

Just throwing my observations, I think I'm getting something similar. It's quite possible that it's because I'm a newbie to Angular and I'm doing something really dumb.

.controls{
    transition: 1s;
}

.controls.ng-enter {
    opacity: 0;
    -webkit-transform:scale3d(0.5, 0.5, 0.5);
    -moz-transform:scale3d(0.5, 0.5, 0.5);
    transform:scale3d(0.5, 0.5, 0.5);
}

.controls.ng-enter-active {
    opacity: 1;
    -webkit-transform:scale3d(1, 1, 1);
    -moz-transform:scale3d(1, 1, 1);
    transform:scale3d(1, 1, 1);
}

.controls.ng-leave {
    opacity: 1;
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
}

.controls.ng-leave-active {
    opacity: 0;
    -webkit-transform:translate3d(100px, 0, 0);
    -moz-transform:translate3d(100px, 0, 0);
    transform:translate3d(100px, 0, 0);
}

Then the directive:

<div ui-view class="controls"></div>

This directive is a sub view of the main layout.

<body ng-app="app">
    <div ng-controller="MainController" id="frame">
        <div ng-include="'mainMenu.html'"></div>
        <div ui-view></div>
    </div>
</body>

And this is my routing scheme:

$urlRouterProvider.otherwise('/');

$stateProvider

    .state('controls', {
        url: '/controls',
        templateUrl: 'partials/containers/controls.html'
    })

    .state('controls.navigation', {
        url: '/navigation',
        templateUrl: 'partials/controls/navigation.html'
    })

    .state('controls.search', {
        url: '/search',
        templateUrl: 'partials/controls/search.html'
    })

    .state('pages', {
        url: '',
        templateUrl: 'partials/containers/pages.html'
    })

    .state('pages.home', {
        url: '/',
        templateUrl: 'partials/pages/home.html'
    })

    .state('pages.work', {
        url: '/work',
        templateUrl: 'partials/pages/work.html'
    })

    .state('pages.think', {
        url: '/think',
        templateUrl: 'partials/pages/think.html'
    })

    .state('pages.career', {
        url: '/career',
        templateUrl: 'partials/pages/career.html'
    })

    .state('pages.news', {
        url: '/news',
        templateUrl: 'partials/pages/news.html'
    })

    .state('pages.studios', {
        url: '/studios',
        templateUrl: 'partials/pages/studios.html'
    })

    .state('pages.contact', {
        url: '/contact',
        templateUrl: 'partials/pages/contact.html'
    })

    .state('pages.article', {
        url: '/article',
        templateUrl: 'partials/pages/article.html'
    })

if I change all of the instances of the .control to class in my CSS to [ui-view] then the animation applies, but it applies to everything! The parent and the child views, which is obviously less than ideal.

@richardvanbergen
Copy link

I've just made a plunker to demonstrate the issue I'm having.

http://plnkr.co/edit/c3ztR4TbirfiiG3yqzFE?p=preview

If you click between the navigation and search then the animation applies. But changing the master view results in an instant transition. This is to be expected but I'm not sure how I can apply one animation the the child view and another to it's sibling.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@arush @meenie @christopherthielen @lanceschi @richardvanbergen