Layout transitions doesn't work

21 posts, 0 answers
  1. Rolf Falnes
    Rolf Falnes avatar
    13 posts
    Member since:
    Mar 2009

    Posted 15 Jan Link to this post

    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

  2. Neli
    Admin
    Neli avatar
    428 posts

    Posted 19 Jan Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Rolf Falnes
    Rolf Falnes avatar
    13 posts
    Member since:
    Mar 2009

    Posted 19 Jan in reply to Neli Link to this post

    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

  4. Rolf Falnes
    Rolf Falnes avatar
    13 posts
    Member since:
    Mar 2009

    Posted 20 Jan in reply to Rolf Falnes Link to this post

    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

  5. Neli
    Admin
    Neli avatar
    428 posts

    Posted 21 Jan Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  6. Rolf Falnes
    Rolf Falnes avatar
    13 posts
    Member since:
    Mar 2009

    Posted 21 Jan in reply to Neli Link to this post

    Ok, thanks Neli.

    But what about the other problems I noted?

    Regards, Rolf

  7. Neli
    Admin
    Neli avatar
    428 posts

    Posted 25 Jan Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  8. Rolf Falnes
    Rolf Falnes avatar
    13 posts
    Member since:
    Mar 2009

    Posted 25 Jan in reply to Neli Link to this post

    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 

  9. Neli
    Admin
    Neli avatar
    428 posts

    Posted 27 Jan Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  10. Rolf Falnes
    Rolf Falnes avatar
    13 posts
    Member since:
    Mar 2009

    Posted 27 Jan in reply to Neli Link to this post

    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

  11. Neli
    Admin
    Neli avatar
    428 posts

    Posted 29 Jan Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  12. Rolf Falnes
    Rolf Falnes avatar
    13 posts
    Member since:
    Mar 2009

    Posted 01 Feb in reply to Neli Link to this post

    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

  13. Neli
    Admin
    Neli avatar
    428 posts

    Posted 03 Feb Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  14. Rolf Falnes
    Rolf Falnes avatar
    13 posts
    Member since:
    Mar 2009

    Posted 04 Feb in reply to Neli Link to this post

    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

  15. Neli
    Admin
    Neli avatar
    428 posts

    Posted 08 Feb Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  16. Rolf Falnes
    Rolf Falnes avatar
    13 posts
    Member since:
    Mar 2009

    Posted 08 Feb in reply to Neli Link to this post

    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

  17. Neli
    Admin
    Neli avatar
    428 posts

    Posted 10 Feb Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  18. Rolf Falnes
    Rolf Falnes avatar
    13 posts
    Member since:
    Mar 2009

    Posted 15 Feb in reply to Neli Link to this post

    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

  19. Neli
    Admin
    Neli avatar
    428 posts

    Posted 17 Feb Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  20. Neli
    Admin
    Neli avatar
    428 posts

    Posted 19 Feb Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  21. Rolf Falnes
    Rolf Falnes avatar
    13 posts
    Member since:
    Mar 2009

    Posted 19 Feb in reply to Neli Link to this post

    Ok, thanks Neli.

    We'll probably go for another library then.

    Regards, Rolf

Back to Top