Kendo UI FX and initialisation

[Fred]

When using the standard jQuery effects, the animation will not play when the final state of the animation equals the current state. Using kendo.fx or kendoAnimate this does not work.

An example shows much better what I mean:

kendoAnimate: http://jsfiddle.net/RedF/ca8vz/

kendo.fx: http://jsfiddle.net/RedF/CYpht/

Notice that I'm using the animations from within a knockout custom binding, which is a necessary requirement in my project.

The example clearly shows the difference when you press 'Run' in jsfiddle:

• In the jQuery slideDown variant the sliding text is invisible until you click the ToggleVisibility button and then changes between visible/invisible when you click the ToggleVisibility button;
  
  
• In the kendoAnimate variant the sliding text will start visible, slide up and become invisible and then changes between visible/invisible when you click the ToggleVisibility button;
• In the kendo.fx variant, well....., there are issues;

Can you please tell me how can I use the kendo effects/animations with proper 'instant' initialisation? I'm sure it can be done in many ways with just CSS transitions etc. etc. but I really want to use only the kendo UI framework as much as possible.

Kind regards,
Fred

[Petyo]

Hi Fred,

First of all, I would like notice that the recommended approach would be the through kendo.fx API. The kendoAnimate interface is a legacy one, maintained for backwards compatibility and widget configuration. 

The FX sample you created had one problem - you called reverse, and then play, on the same object. I reworked and simplified it a bit to http://jsfiddle.net/RedF/CYpht/. However, as far as I understand, your concern is related to the fact that the animation is played initially. This is a design decision which we have implemented across all effects available - the element will be brought to the effect starting point, and then played to the effect final position. A workaround I may suggest is to use a variable flag to skip the first update, called from knockout. 

Regards,
Petyo
Telerik

[Fred]

Hi Petyo,
thanks for the reply.

I know kendo.fx is preferred. That is why I initially tried to get it working with kendo.fx. But documentation is, ummm, terse at this moment ;-)

 Is the jsfiddle url in your reply the correct one with the changes? Because it seems to bring me to my original one, and I do not see your changes.

Cheers,
Fred

[Petyo]

Hello Fred,

I am sorry - indeed, the URL is wrong. Please check the correct one.

Regards,
Petyo
Telerik

[Fred]

Hi Petyo,
your new URL answered a lot of my questions.

'...reverse().' is not a modifier but an activator as well, just like play().

Since the initial animation is by design, I think we will follow your suggestion to add flags to the elements to enable 'instant view/hide' after page load is complete.

Kind regards,
Fred