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