This is a migrated thread and some comments may be shown as answers.

Effects inside a SPA app

3 Answers 18 Views
Effects
This is a migrated thread and some comments may be shown as answers.
Mate
Top achievements
Rank 2
Mate asked on 25 Jun 2015, 03:27 PM

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?

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 26 Jun 2015, 11:10 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Joel
Top achievements
Rank 1
answered on 10 Jul 2019, 07:37 PM

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.

0
Alex Hajigeorgieva
Telerik team
answered on 11 Jul 2019, 04:40 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Effects
Asked by
Mate
Top achievements
Rank 2
Answers by
Petyo
Telerik team
Joel
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or