📄 ext.fx.html
字号:
<!--Mock<link rel="stylesheet" type="text/css" href="http://localhost/ext/resources/css/ext-all.css" /><link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/docs.css"/><link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/style.css"/>--><style type="text/css"> body { overflow: scroll; } /** .mdesc .long { display: block; } */</style><!-- End Mock--><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><div class="body-wrap"> <div class="top-tools"> <a class="inner-link" href="#Ext.Fx-props"><img src="/images/s.gif" class="item-icon icon-prop">Properties</a><a class="inner-link" href="#Ext.Fx-methods"><img src="/images/s.gif" class="item-icon icon-method">Methods</a><a class="inner-link" href="#Ext.Fx-events"><img src="/images/s.gif" class="item-icon icon-event">Events</a><a class="inner-link" href="#Ext.Fx-configs"><img src="/images/s.gif" class="item-icon icon-config">Config Options</a><a class="bookmark" href="../docs/?class=Ext.Fx"><img src="/images/s.gif" class="item-icon icon-fav">Direct Link</a> </div><h1>Class Ext.Fx</h1> <table cellspacing="0"> <!-- <tr> <td class="label"> Package: </td> <td class="hd-info"> </td> </tr> --> <tr> <td class="label"> Defined In: </td> <td class="hd-info"> Fx.js </td> </tr> <tr> <td class="label"> Class: </td> <td class="hd-info"> Ext.Fx </td> </tr> <tr> <td class="label"> Extends: </td> <td class="hd-info"> Object </td> </tr> </table> <div class="description"> <p>这是一个提供基础动画和视觉效果支持的类。<b>注意:</b>此类被引用后会自动应用于 <a href="###" onClick="alert('Ext.Element');">Ext.Element</a> 的接口, 因此所有的效果必须通过 Element 对象来实现。反过来说,既然 Element 对象实际上并没有定义这些效果, Ext.Fx 类<b>必须</b>被 Element 对象引用后才能使那些效果生效。</p><br/> <p>值得注意的是,虽然 Fx 的方法和许多非 Fx Element 对象的方法支持“方法链”,即他们返回 Element 对象本身作为方法的返回值, 但是并非每次都能将两个对象混合在一个方法链中。Fx 的方法使用一个内部的效果队列以使每个效果能够在适当的时候按次序展现。 另一方面,对于非 Fx 的方法则没有这样的一个内部队列,它们总是立即生效。正因为如此,虽然可以在一个单链中混合调用 Fx 和非 Fx 的方法, 但是并非总能得到预期的结果,而且必须小心处理类似的情况。</p><br/> <p>移动类的效果支持8个方向的定位锚,这意味着你可以选择 Element 对象所有8个不同的锚点中的任意一个来作为动画的起点或终点。 下面是所有支持的定位锚点位置:</p><pre>值 说明----- -----------------------------tl 左上角t 顶部中央tr 右上角l 左边中央r 右边中央bl 左下角b 底部中央br 右下角</pre> <b>尽管某些 Fx 方法可以接受特殊的自定义配置参数,然而下面的配置选项区域内显示了可供所有 Fx 方法使用的公共选项。</b> </div> <div class="hr"> </div> <a id="Ext.Fx-configs"></a> <h2>配置项</h2> <table cellspacing="0" class="member-table"> <tr> <th class="sig-header" colspan="2"> 配置项 </th> <th class="msource-header"> 定义者 </th> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="callback-header"></a> <b>callback</b> : Function <div class="mdesc"> <div class="short"> 指定当效果完成时调用的函数 </div> <div class="long"> 指定当效果完成时调用的函数 </div> </div> </td> <td class="msource"> Fx </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="easing-header"></a> <b>easing</b> : String <div class="mdesc"> <div class="short"> 指定特效函数使用的合法的 Easing 值 </div> <div class="long"> 指定特效函数使用的合法的 Easing 值 </div> </div> </td> <td class="msource"> Fx </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="duration-header"></a> <b>duration</b> : Number <div class="mdesc"> <div class="short"> 以秒为单位设置的特效持续时间 </div> <div class="long"> 以秒为单位设置的特效持续时间 </div> </div> </td> <td class="msource"> Fx </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="useDisplay-header"></a> <b>useDisplay</b> : Boolean <div class="mdesc"> <div class="short"> 隐藏 Element 对象时是否使用 display CSS样式属性替... </div> <div class="long"> 隐藏 Element 对象时是否使用 <i>display</i> CSS样式属性替代 <i>visibility</i>属性(仅仅应用于那些结束后隐藏 Element 对象的等效,其他的等效无效) </div> </div> </td> <td class="msource"> Fx </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="block-header"></a> <b>block</b> : Boolean <div class="mdesc"> <div class="short"> 当特效生效时是否阻塞队列中的其他特效 </div> <div class="long"> 当特效生效时是否阻塞队列中的其他特效 </div> </div> </td> <td class="msource"> Fx </td> </tr> <tr class="config-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <a id="stopFx-header"></a> <b>stopFx</b> : Boolean <div class="mdesc"> <div class="short"> 是否在当前特效完成后停止并删除后续(并发)的特效 / </div> <div class="long"> 是否在当前特效完成后停止并删除后续(并发)的特效 / </div> </div> </td> <td class="msource"> Fx </td> </tr> </table> <a id="Ext.Fx-props"></a> <h2>公告属性</h2> 这个类没有公告属性。 <a id="Ext.Fx-methods"></a> <h2>公共方法</h2> <table cellspacing="0" class="member-table"> <tr> <th class="sig-header" colspan="2"> 方法 </th> <th class="msource-header"> 定义者 </th> </tr> <tr class="method-row expandable"> <td class="micon"> <a class="exi" href="#expand"> </a> </td> <td class="sig"> <!--ClassName--><a id="slideIn-slideIn"></a> <b>slideIn</b> ( <code> <span class='optional'>[String anchor]</span>, </code> <code> <span class='optional'>[Object options]</span> </code> ) : Ext.Element <div class="mdesc"> <div class="short"> 将元素滑入到视图中。作为可选参数传入的定位锚点将被设置为滑入特效的起... </div> <div class="long">
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -