Layout transitions doesn't work

[Rolf Falnes]

Hello.

We've seen multiple problems with the layout transition effects:

1. The width of the view to navigate from is being reduced to a fraction of the actual width in the beginning of the transition.

2. The AppBar is not part of the transition effect if navigating back to a view with an AppBar "sticked" to the top and the vertical scrollbar position in the browser is not at the top.

3. Have seen the transition effect not working at all sometimes when navigating back to a previous view.

 

We're using Kendo UI for jQuery R3 2020.

 

Regards, Rolf

[Neli]

Hello Rolf,

Thank you for contacting us. Unfortunately, the provided information is not enough to reproduce the issues you are experiencing. Could you please share more details on the exact implementation at your end? I will appreciate it if you could prepare an isolated runnable sample or a Dojo example where the issues are replicated and send it back to us. This way we could inspect and debug the problems locally, and do our best to provide you with a reliable solution.

I am looking forward to your reply.

Regards,
Neli
Progress Telerik

[Rolf Falnes]

Hello.

See the attached file for a sample. Here you can also see that not all parts of each view gets the transition effect.

Also, the transition effects disappears after a short while of using the different navigation links.

Regards, Rolf

[Rolf Falnes]

Hello again.

I now saw that you require a full project so I've attached a test project here.

I use Windows 10, VS 2019, .Net 4.6.1, Google Chrome.

Regards, Rolf

[Neli]

Hi Rolf,

Thank you for providing an isolated sample. However, when one view is replacing another one there is an additional div rendered that is with position "absolute", which caused the described issue. However, I am afraid that there is not much that could be done. I would suggest you set a fixed width to the views in order to avoid the described appearance. Here is a Dojo example where this is demonstrated. And here you could find the modified sample from your last reply.

Regards,
Neli
Progress Telerik

[Rolf Falnes]

Ok, thanks Neli.

But what about the other problems I noted?

Regards, Rolf

[Neli]

Hi Rolf,

I have tested the behavior with AppBar with positionMode set to "static" and "sticky". The appearance is the same on my end. As you could see on the linked screencast, the header with the AppBar appears/disappears together with the entire view. Also, I did not manage to replicate the transition effect not working at all. Please let me know if I am missing something. 

Regards,
Neli
Progress Telerik

[Rolf Falnes]

Hi Neli.

If you slow down the transition you can see that the view it navigates away from is not gradually fading out. Instead it suddenly disappears at the end of the transition.

Regards, Rolf 

[Neli]

Hello Rolf,

I have tested the examples by slowing the transition. The AppBar was appearing correctly on my end. However, as there was no element to replace it, the AppBar was not disappearing the same way as the other element in the view. In order to fix the disappearing issue, I would suggest rendering the two views at the same height. In the provided sample I added an empty div with a small height, thus the two views to be rendered at the same starting point. After the applied change, when the view with the AppBar is about to disappear, the AppBar is correctly replaced and the transition is rendered as expected. Here is the modified Dojo. 

I have tested multiple times in different browsers, but I did not manage to replicate the issue with the transition not working at all. The transition is always working on my end. 

Regards,

Neli
Progress Telerik

[Rolf Falnes]

Hi again.

But also in your modified Dojo, the view navigating away from is not gradually fading out as I've stated previously. Instead it suddenly disappears at the end of the transition. For example, the green div from the first view is not gradually fading out. I've tested this in MS Edge and Chrome.

Regards, Rolf

[Neli]

Hello Rolf,

The transition effect is used in the showIn method of the Layout, thus the "fade" is applied to the view that is about to show up, but not to the one that is going to disappear. Here you will find a screencast demonstrating the appearance on my end. As you will see, all the green and red elements in the second view are appearing simultaneously. Also, the behavior of disappearing of elements in both views is the same, they disappear, once the new view is rendered. 

Regards,
Neli
Progress Telerik

[Rolf Falnes]

Ok, thanks Neli.

I thought the transition effect sent to the showIn function would apply for both the views navigating to and from.

So what do I need to do to apply the fade transition to the view we're navigating away from?

Regards, Rolf

[Neli]

Hi Rolf,

I would suggest you use the 'k-fx-end' and 'k-fx-current' classes and customize the transition according to the requirements. You could find some suggestions for fading-out transition in the StackOverflow thread linked below:

- https://stackoverflow.com/questions/15907079/css3-transition-fade-out-effect

Here is a Dojo example where the style from below is used to customize the fading our effect:

.k-fx-end .k-fx-current{ 
         opacity: 0;
         transition: visibility 0s 2s, opacity 2s linear;       
      }

Regards,
Neli
Progress Telerik

[Rolf Falnes]

Thanks again Nali.

I've updated the test project, see attachment.

Now with regards to the issue with the appbar you can see this by first navigating to view 2, then scroll down to the bottom and click the "Go to view 3" link, and in view 3, click the back button. You'll then see the appbar suddenly appearing at the end of the transition from view 3 to view 2.

Also, when clicking on the "Go to view 3" link, you'll see the red div disappears at the beginning of the transition from view 2 to view 3.

Regards, Rolf

[Neli]

Hello Rolf,

I managed to replicate the described issue. However, the AppBar is not part of the Hybrid UI components, thus such behavior is expected. Please note also that when using Hybrid components we recommend using the LESS themes. 

In the current scenario, I would suggest you use a different position mode for the AppBar positionMode, for example, if it is suitable for your scenario, you could set it to "fixed". Or if you decide to use the "sticky" positionMode, you could try some of the approaches suggested in StackOverflow for setting fade-in transition to sticky element.

- https://stackoverflow.com/questions/29230661/applying-transition-fade-in-fade-out-to-sticky-nav-in-css-jquery

- https://stackoverflow.com/questions/17418332/creating-sticky-nav-with-fadein-and-fadeout-effects

- https://stackoverflow.com/questions/11413439/fade-in-out-fixed-position-div-when-user-scrolls-to-very-bottom-of-page

In order to resolve the second issue with the disappearing red 'div', I would suggest you set the height to the "view 3".

 <script id="view3" type="text/template">
        <div style="width: 95vw; height: 800px; background-color: beige;">
            <b>View 3</b><br><br>
            <a class="k-button" href="javascript:history.back(-1)"><span class="k-icon k-i-arrow-chevron-left"></span></a>
      </div>
    </script>

 

Regards,
Neli
Progress Telerik

[Rolf Falnes]

Hello Nali.

We're not using the Hybrid UI components as far as I know... Have I done something wrong in the test project which cause it to use the Hybrid UI?

If so, how can I change it so that it's not using the Hybrid UI and then get the AppBar transition to work without needing to change to fixed position mode?

Regards, Rolf

[Neli]

Hi Rolf,

Please excuse me for misleading you in my previous reply by mentioning the Hybrid components. 

However, I am afraid that there is not much that can be done with the issue with the fading transition of the AppBar. The described behavior is not related to the Kendo AppBar component. The same behavior will occur in case a standard element with position 'sticky' is used. Also, the behavior depends on the browser. For example, in Firefox a sticky element is fading in and out, while in Chrome and Edge, the sticky element appears suddenly. Here is a Dojo example where the AppBar is replaced by a standard div element. 

 As suggested in my previous reply, if it is suitable for your scenario you could use the AppBar with a fixed position. 

Regards,
Neli
Progress Telerik

[Rolf Falnes]

Hello again Neli.

I do feel like this is a bug though.

Another issue is that when having scrolled to the bottom of view 2 and then navigating to view 3, view 2 is scrolled to the top before the transition starts, which doesn't look good.

Do you have support for an "out-in" transition mode like Vue.js has? I would assume that would solve both issues...

Regards, Rolf

[Neli]

Hi Rolf,

I will need a little bit more time as I would like to discuss the issue with my colleagues. I will back to you once I have some more information to share. 

Thank you for your patience.

Regards,
Neli
Progress Telerik

[Neli]

Hi Rolf,

Thank you very much for your patience. 

I discussed the issue with a developer from the team. As stated in my previous reply, the described appearance is expected. The animations are applied to the entire container of the view. It is up to the browser behavior the way the sticky element will appear. In case when the sticky element needs to be animated you could try to apply custom animation after the element has been rendered. You could try the suggestion described in the link here. 

When the content is replaced from one view to another the views are rerendered and the scroll position could not be set at this point. Thus, the fading-out view is rendered at its top position.

Regarding the "in-out" mode, we do not support such an option. The kendo.fx provides separate methods for  fadeIn() and fadeOut(). You could read more at the link here

Regards,
Neli
Progress Telerik

[Rolf Falnes]

Ok, thanks Neli.

We'll probably go for another library then.

Regards, Rolf