Black Transition between multiple abstract views


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.


1 Like

if i add


see codepen

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



would be great to share some experiences.

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


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

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.

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:

	.directive('focusInput', focusInput);

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

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