Kendo UI开发教程(8): Kendo UI 特效概述

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支持下面几种特效，具体请参见其文档