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.

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

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions