Gap between ui-views when sliding left or right

[Ozkar]

Hi,

Here is the situation:

• I have a 100% width ui-view set to anim-slide-right
• all ui-views are position: absolute
• When sliding right, there is a noticeable gap between the exiting ui-view and entering ui-view

This is causing a problem since you can see the background color through the 'gap'. The size of the gap seems to change depending on the speed and type of easing used.

This can be seen in the official demo page:

http://homerjam.github.io/angular-ui-router-anim-in-out/#/

In the form on the right side, please use these settings:

Speed(ms): 3000 Synchronize Views: True Main View Style: Slide Right

Also make this tiny adjustment to the css to better visualize the problem (you can run this in the javascript console):

$('head').innerHTML += '<style>#main { border: 1px solid red; }</style>'

It will add a 1px red border around the ui-view so you can see the gap.

Can you provide a solution to this, or help me to understand what is causing this problem?

Thanks in advance! =)

[homerjam]

Hi there,

This plugin uses the native methods of angular and ui-router to add and remove the classes required for transitions - as such the delay you're witnessing maybe caused by one of those.

The reason the gap would seemingly be increasing when using different easing functions is that any difference in the start time would exaggerate any synchronisation issues dependent on the the easing curve.

A possible solution would be to look into a way of pausing the transition until both views are ready and then adding the needed classes to both views at the same time.

I have begun using homerjam/angular-gsapify-router as this provides greater control.

On 8 September 2016 at 19:10:08, Ozkar ([email protected]) wrote:

Hi,

Here is the situation:

I have a 100% width ui-view set to anim-slide-right

all ui-views are position: absolute

When sliding right, there is a noticeable gap between the exiting ui-view and entering ui-view

This is causing a problem since you can see the background color through the 'gap'. The size of the gap seems to change depending on the speed and type of easing used.

This can be seen in the official demo page:

http://homerjam.github.io/angular-ui-router-anim-in-out/#/

In the form on the right side, please use these settings:

Speed(ms): 3000 Synchronize Views: True Main View Style: Slide Right

Also make this tiny adjustment to the css to better visualize the problem (you can run this in the javascript console):

$('head').innerHTML += ''

It will add a 1px red border around the ui-view so you can see the gap.

Can you provide a solution to this, or help me to understand what is causing this problem?

Thanks in advance! =)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.