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

準(zhǔn)備開始

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

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>

指定特效顯示的方向

大部分特效可以指定多個(gè)方向。可以通過特效構(gòu)造方法的第一個(gè)參數(shù)來指定方向，或者通過調(diào)用構(gòu)造方法的快捷方法來指明方向。比如下面三種方法的效果是一樣的。

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>

組合特效

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

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>

組合特效也可以同時(shí)應(yīng)用到多個(gè)元素，這時(shí)需要通過$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支持下面幾種特效，具體請(qǐng)參見其文檔

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/jiangu66/p/3212497.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。