Kendo UI 特效概述

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

準備開始

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

<div id="foo">
    I will be animated
</div>

<script>
    var effectWrapper = kendo.fx($("#foo"));
    var fadeOutEffect = effectWrapper.fadeOut();
    fadeOutEffect.play();
</script>

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

<div id="foo">
    I will be animated
</div>

<script>
    kendo.fx($("#foo")).fadeOut().play();
</script>

指定特效顯示的方向

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

<div id="foo">
    I will be animated
</div>

<script>
    var fadeOut1 = kendo.fx($("#foo")).fadeOut();
    var fadeOut2 = kendo.fx($("#foo")).fade("out");
    var fadeOut3 = kendo.fx($("#foo")).fade().direction("out");

    //Call .play() to run any of the above animations
</script>

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

<div id="foo">
    I will be faded out and zoomed out.
</div>

<script>
    var effectWrapper = kendo.fx($("#foo"));
    var fadeOutEffect = effectWrapper.fadeOut();
    fadeOutEffect.add(effectWrapper.zoomOut());
    fadeOutEffect.play();
    // Calling reverse will zoom in and fade in.
</script>

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

<div id="foo">
    I will fade out.
</div>
<div id="baz">
    I will also fade out.
</div>

<script>
    //Use jQuery Deferred to chain multiple effects
    var eleFoo = $("#foo"),
        eleBaz = $("#baz");

    $.when(kendo.fx(eleFoo).fadeOut().play(),
                kendo.fx(eleBaz).fadeOut().play()).then(function(){
            //This will be called when both animations are done
            alert("Both elements faded!");
        });
</script>

Kendo UI 支持的特效種類

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

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