Kendo UI Fx 提供了一個豐富，可擴展，性能經過優化的工具集合用來完成HTML元素的過渡顯示。每種特效近可能的使用CSS Transition ，對于一些老版本瀏覽器使用修改屬性的方法作為補充。所有動畫可以反向顯示從而可以方便的實現元素的顯示和隱藏。 本篇介紹了Kendo UI特效的概要，完整的文檔可以參考?API文檔

準備開始

所有Kendo UI 特效都是通過kendo.fx JQuery 選擇器封裝來創建，每個封裝支持顯示多種特效。例如：

1	<div id="foo">

2	????I will be animated

3

</div>

4

?

5

<script>

6	????var?effectWrapper = kendo.fx($("#foo"));

7	????var?fadeOutEffect = effectWrapper.fadeOut();

8	????fadeOutEffect.play();

9

</script>

和jQuery 方法一樣，kendo UI fx也支持方法鏈，比如上面代碼可以簡化為：

1	<div id="foo">

2	????I will be animated

3

</div>

4

?

5

<script>

6	????kendo.fx($("#foo")).fadeOut().play();

7

</script>

指定特效顯示的方向

大部分特效可以指定多個方向。可以通過特效構造方法的第一個參數來指定方向，或者通過調用構造方法的快捷方法來指明方向。比如下面三種方法的效果是一樣的。

1	<div id="foo">

2	????I will be animated

3

</div>

4

?

5

<script>

6	????var?fadeOut1 = kendo.fx($("#foo")).fadeOut();

7	????var?fadeOut2 = kendo.fx($("#foo")).fade("out");

8	????var?fadeOut3 = kendo.fx($("#foo")).fade().direction("out");

9

?

10	????//Call .play() to run any of the above animations

11

</script>

組合特效

可以將多個特效組合中一起。比如：

1	<div id="foo">

2	????I will be faded out and zoomed out.

3

</div>

4

?

5

<script>

6	????var?effectWrapper = kendo.fx($("#foo"));

7	????var?fadeOutEffect = effectWrapper.fadeOut();

8	????fadeOutEffect.add(effectWrapper.zoomOut());

9	????fadeOutEffect.play();

10	????// Calling reverse will zoom in and fade in.

11

</script>

組合特效也可以同時應用到多個元素，這時需要通過$when 方法。比如下面代碼：

1	<div id="foo">

2	????I will fade out.

3

</div>

4	<div id="baz">

5	????I will also fade out.

6

</div>

7

?

8

<script>

9	????//Use jQuery Deferred to chain multiple effects

10	????var?eleFoo = $("#foo"),

11	????????eleBaz = $("#baz");

12

?

13	????$.when(kendo.fx(eleFoo).fadeOut().play(),

14	????????????????kendo.fx(eleBaz).fadeOut().play()).then(function(){

15	????????????//This will be called when both animations are done

16	????????????alert("Both elements faded!");

17	????????});

18

</script>

Kendo UI支持的特效種類

Kendo UI支持下面幾種特效，具體請參見其文檔

• Expand
• Fade
• Flip
• PageTurn
• SlideIn
• Tile
• Transfer
• Zoom

?

轉載于:https://www.cnblogs.com/jiangu66/p/3212497.html

總結

以上是生活随笔為你收集整理的Kendo UI开发教程(8): Kendo UI 特效概述的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。