Kendo UI 特效概述

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

準(zhǔn)備開(kāi)始

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

<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 也支持方法鏈，比如上面代碼可以簡(jiǎn)化為：

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

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

指定特效顯示的方向

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

<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>

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

<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>

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

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