FX: Is it possible to have an effect like the kendo mobile slide-right transition?

4 posts, 1 answers
  1. Answer
    Robert
    Robert avatar
    39 posts
    Member since:
    Oct 2012

    Posted 25 Jun 2013 Link to this post

    It appears that KendoUI Mobile has a number of view transitions which are not available in Kendo framework FX; I'm specifically looking at the the slide-right view transition.

    The slide-right transition differs from the slide-in effect in that the slide-right animates the appearance of the new view (div) at the same time as it animates the disappearance of the old view (div).  The new view slides in from the left, "pushing" the old view off to the right.  In contrast, the slide-in effect slides in over (on top of) the old view.

    Is there anyway to have an effect like the mobile slide-right transition when switching between two divs without affecting the entire visible page?  I'm looking for something that would work similarly to the flip effect, i.e.:
    <div id="container">
        <div id="A"/>
        <div id="B"/>
    </div>

    <script>
        kendo.fx($("#container")).slideRight($("#A"), $("#B")).play();
    </script>

    so that div A would appear to slide-in, pushing div B off to the right.  (Similarly, slide- left, up, and down effects would be useful.)

    Back to the question: Is this possible now or is the material for the feedback pages?

    Thanks.
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 26 Jun 2013 Link to this post

    Hi Robert,

    The transition you describe is actually exposed via FX too as tile (see demos). Due to compatibility reasons, we had to keep the "slide" name in Kendo UI Mobile. Please give it a try.

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Robert
    Robert avatar
    39 posts
    Member since:
    Oct 2012

    Posted 26 Jun 2013 Link to this post

    Perfect!

    I'm not sure why the effect syntax is:

        kendo.fx($("#B")).tileRight($("#A")).play();                                        // use #B to replace #A

    when the analogous syntax for flip (and pageturn) are:

        kendo.fx($("#container")).flip($("#A"), $("#B")).play();                // flip from #A to #B

    You might want to consider a parallel syntax for parallel actions rule in developing your API's.

    Still, It's exactly the transition I was looking for, so I'm happy.
  4. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 28 Jun 2013 Link to this post

    Hello Robert,

    Thank you for your input. The two effect signatures are different (flip needs three elements, tile deal with two), so this was one of the reasons we did follow symmetry in the declarations. Changing the flip signature might be a bit strange, in my opinion:

    // old
    flip(previous, next);
    // new
    flip(next, previous);

    The tile effect on the other side follows the convention of having the active element being the "primary" one.

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top