zoukankan      html  css  js  c++  java
  • 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支持下面几种特效,具体请参见其文档

     

  • 相关阅读:
    Atitit.隔行换色  变色 css3 结构性伪类选择器
    Atitit.jpg png格式差别以及解决jpg图片不显示的问题
    Atitit.jpg png格式差别以及解决jpg图片不显示的问题
    Atitit.预定义变量与变量预处理器
    Atitit.jpg png格式差别以及解决jpg图片不显示的问题
    Atitit.预定义变量与变量预处理器
    Atitit.增强系统稳定性----虚拟内存的设置
    Atitit.md5 实现原理
    Atitit.增强系统稳定性----虚拟内存的设置
    Atitit.md5 实现原理
  • 原文地址:https://www.cnblogs.com/jiangu66/p/3212497.html
Copyright © 2011-2022 走看看