Android Transition and UI-View opacity

ionic-v1
1

Hi guys,

So I’m not familiar with the transition framework so I couldn’t pin down the exact piece of code that’s failing, but if you use a ui-view like so:

    .state('app', {
        url: '/app',
        abstract: true,
        template: '<ui-view/>'
    })

it never becomes active. And for some weird reasons on the browser it’s not a problem because the view gets an extra opacity style:

<!-- uiView: undefined --><ui-view class="pane" nav-view="stage" style="opacity: 1; -webkit-transform: translate3d(0%, 0px, 0px);">

If I run the exact same code on my nexus 6 I get this through inspect:

<!-- uiView: undefined --><ui-view class="pane" nav-view="stage" style="-webkit-transform: translate3d(0%, 0px, 0px);">

Which is more what’s expected for a non-active view. But there’s something shady with this… First because it’s my root view under only a ion-nav-view, all the other views are in there, and it gets staged and never active (whereas child views do get active appropriately). Second because on android this view never gets the opacity factor.

I fixed it by forcing the opacity like this:

ui-view[nav-view="stage"] {
    opacity: 1 !important;
}

Not pretty but until you guys figure this one out, it’ll have to do!

1 Like
2

I’ve got same problem with ionic-bower#1.1.0
No solution?

UPDATE
Ok, at least now there’s an issue on this

3

Thanks for the patience. Tracking this one for 1.2 release.

4

I’ve tried moving my version of ionic from 1.24 to 1.3.0 then to 1.3.1 among some of the other fixes of;

  • manually adding css.opacity = 1 in ionic-angular.js

  • and adding ion-view[nav-view="stage"] { opacity: 1 !important } to my stylesheet.

But none of it seems to take. I am still getting;

[nav-view=stage] { opacity: 0 } set on my ion-view