您的位置：首页 > 产品设计 > UI/UE

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

2013-07-24 06:44 429 查看
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
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航