Black Transition between multiple abstract views

ionic-v1
1

Hey,

here is my codepen:

Why is the transition between the two views black?The animation itself also looks weird.
However an animation between two views inside one abstract state, looks very nice.
Do i missconfigure ionic?

I found this entry
Brief black screen during navigation
but it does not have a codepen as an example so i couldnt understand if its the same problem.

Thanks
kirrg

1 Like
2

if i add

$ionicViewSwitcher.nextDirection('back');

see codepen http://codepen.io/anon/pen/bNJzeB?editors=101

the black transition is gone, but is this way i need to handle multiple abstract view transitions?

thanks

3

nobody?

would be great to share some experiences.

4

Just remove the abstract:true line and the black transitions will go away

If you can, refactor your app to get rid of the abstract/child/nested states. It does seem to cause a few issues within the product such as the issue you are seeing with the ion-nav-view switching, also the IOS swipe to go back feature doesnt work with nested/child states

4 Likes
5

thanks for your answer. im very happy somebody replied :smiley:

do you have an explanation why this works without “abstract: true”?any idea?

so you suggest to use flat states?

1 Like
6

No prob. I am not exactly sure, I’m sure you could dig around in the ionicHistory, or nav related directives/services and see what’s going on. Platform specific transitions are defined in ionicConfig service so you could check there too…

But I would recommend using flat states at this point, since some ionic features are broken with nested states.

7

The issue for me was that I was using the ‘autofocus’ directive. An alternative is to not focus the element until the transition has finished, this directive does the trick:

angular
	.module('your-module-name-here')
	.directive('focusInput', focusInput);

focusInput.$inject = ['$timeout'];

/* @ngInject */
function focusInput($timeout) {
	return {
		link:     link,
		restrict: 'A',
		scope:    {
			wait: '='
		}
	};
	function link(scope, element, attrs) {
		$timeout(function () {
			element[0].focus();
		}, scope.wait || 500)
	}
}

`