CODEWITHSUNDEEP
angularjsanimationangular-ui-routerconfig
georgelx
georgelx

Reputation: 484

ui-router animations do not work on nested views

Im using ui-router stages in parent-child format and cannot get state transition animations to run every time I change router state. Animations are working when I open a state for the first time, but when switching to a different sub-state no animation is shown.

My state config is following:

.state('nointro', {
    abstract: true,

    views: {
        "main": { templateUrl: "partials/nointro.html" },
        "content": {  }
    }
})

.state('url1', {
    cache: false,
    url: '^/url1',
    parent: 'nointro',
    views: {
        "content": { templateUrl: "partials/url1.html" }
    }
})

.state('url2', {
    cache: false,
    url: '^/url2',
    parent: 'nointro',
    views: {
        "content": { templateUrl: "partials/url2.html" }
    }
})

I use default ui-router suggested transition styles from FAQ.

What I want is a animation for each state change even if parent state does not change. Is this possible?

Here is JSFiddle with a sample code.

Upvotes: 3

Views: 655

Answers (1)

Kirill Husiatyn
Kirill Husiatyn

Reputation: 828

In your styles don't use [ui-view] - but use ui-view selector =)

Here is fiddle

Upvotes: 3

Related Questions