Could not resolve '' from state 'gsapifyRouterBlankState'

[jonathansolorzn]

I'm getting that error message log, what I've done is just add this to the module config:

// Set default transitions to use if unspecified
        gsapifyRouterProvider.defaults = {

            // name of transition to use or 'none'
            enter: 'fadeDelayed',

            leave: 'fade'

        };

        // Enable transition on initial load
        gsapifyRouterProvider.initialTransitionEnabled = true; // defaults to false

Also I wanted to ask something else, I've got my views named, there's a main view, where a directive <mp-dash/> is loaded, inside that directive there are other 3 named views, so I add gsapify-router class to all the named views (the main, and the ones inside the directive), that directive loads another directive (<mp-options/>, It's ng-repeated also)... I'm experiencing a lag in the animation when I go to a state that contains the <mp-dash/> directive, there's a space generated in the top and the bottom of the element...

Any ideas?

[homerjam]

I'd need to see an example to help on this really. Though from the sounds of it you could simplify the structure of your project - I don't think using views inside directives is best practice.

[jonathansolorzn]

Here's a gif of the animation I'll simplify thing then... but also, the transition leave isn't recognized when I'm in the first two states

[jonathansolorzn]

I believe that this error is generated because of a state that has a url value of: url: '/', I need the url to be that, so what is the fix for that?

I reorganized the app, now there's just one directive, the lag dissapeared, but now I'd like to know how could I make the animation in other element rather than the one that has the ui-view attribute?

I mean, I have the following code:

<div class="vertical-center">
    <div class="container">
        <div id="dashboard" class="row panel"><!-- I'd like to animate this div -->

            <div class="panel-heading gsapify-router" ui-view="dashboard-heading">
                <b>Menu</b>
            </div>
            <div class="panel-body gsapify-router" ui-view="dashboard-body"></div>

        </div><!-- /dashboard -->
    </div>
</div>

As mentioned in the comented code, I'd like to animate the div#dashboard.

[homerjam]

This directive is purely for animating views with ui-router, anything else is beyond its scope I'm afraid.

Regarding the error in the title of this issue - it looks like the state is missing a name. Please provide a jsfiddle/plunkr/codepen reproducing the issue and I will reopen.

Thanks

[jonathansolorzn]

Here's a plunker of the animation, what I want to animate is the complete panel, and also, when the animation occurs I don't like the effect of jump, I believe it's not part of the animation...

[homerjam]

If you want to animate the complete panel then its probably better to place it inside a view rather than having the views inside the panel.

Re the jumping, have you tried the suggestion here?

[jonathansolorzn]

Already tried both of your suggestions... could you please try editing the plunker to give the solution?

[homerjam]

http://embed.plnkr.co/ekSoys/