Slow transition to a state with a huge(2.0mb) image

.background-image {
background: url('../img/tunent-bg.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
width: 100vw;
height: 100vh;

-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);


I have my landing page state which has a background image displayed using above CSS and an empty div like this

    <div class="background-image"></div>
<div class="wrapper"></div>

The image being used is 2MB. I have another view called settings and when I transition from settings back to Landing page, the transition is very slow.
I’m using Nexus 4 running 5.1.1.
Any help would be appreciated


View transitions are usually a pain in the as*.

Try using this technique:


Thanks, it’s working great, can you tell me how can I capture android back button,apply back transition and go back with this? The navbar back button has the directive but the hardware/software back key of Android?


little work around if you want to use ionic page transitions:
listen to $ionicView.afterEntered event and $ionicView.beforeLeave in your state with the huge image --> initially set a flag to false, after you entered the view set it to true and before you leave again to false.

Connect a ng-if with that flag to hide and show that huge image before the transitions start ;).

But as Gajotres described --> you can use the native transitions in your code. look in the code of the directive --> you can overwrite the hardwarebackbutton and call window.plugins.nativepagetransitions.slide() in it.