Effects inside a SPA app

[Mate]

Hi,

I am wondering if it is possible to use Effects when there is a page change in a SPA app which is built with purely Kendo.

For example this is the code of a simple SPA with 2 pages:

// variables
window.rootUrl = "http://localhost:3000"

// datasource

// models
var model = kendo.observable({foo: "I am testing and trying out new things"});

// views
var layoutView = new kendo.Layout("layout-template");
var header = new kendo.View("index-template");
var content = new kendo.View("content-template");
var contact = new kendo.View("contact-template", {model: model, evalTemplate: true});

// router

var myrouter = new kendo.Router({
    init: function() {
        layoutView.render("#app");
    }
});

myrouter.route("/aboutme", function () {
    layoutView.showIn("#top", header);
    layoutView.showIn("#main", content);
});

myrouter.route("/contact", function () {
    layoutView.showIn("#top", header);
   layoutView.showIn("#main", contact);
});

// onload
$(function() {
    myrouter.start();
});

 

Basically my question is if it is possible when I change page from aboutme to contact that the contact page not just appears but slides in or fades in ( and the aboutme slides out or fades out ). If it is possible then whats the recommended way to do it using the example code above?

[Petyo]

Hello Mate,

sure - there is a built-in mechanism for that, too. You can examine the source code of our sample app. Check this snippet from the documentation, too.

Regards,
Petyo
Telerik

 

 

[Joel]

Hello Petyo,

 

Is there a place where I can check the animations supported by "ShowIn" Method?

I have tried to find "swap" within Kendo source files but haven't been able to find it.

Thanks in advance.

[Alex Hajigeorgieva]

Hi, Joel,

Here is a link to the documentation that shows the definition of the transitionClass optional parameter:

https://docs.telerik.com/kendo-ui/api/javascript/layout/methods/showin

And here is a step by step instruction how to define the transition effects with CSS rules:

https://docs.telerik.com/kendo-ui/controls/interactivity/fx/replace

Kind Regards,
Alex Hajigeorgieva
Progress Telerik