EXT核心API详解(六)-Ext.Fx

简介: Ext.Fx类对于我这样的懒鬼而言,Fx类是核心类库中最激动人心的一个类,它不是最重要的,却是最实用的一个类定义了一些常用的特效方法,不妨自己多动手试试下面的方法,很有趣的fadeIn( [Object options] ) : Ext.
Ext.Fx类
对于我这样的懒鬼而言,Fx类是核心类库中最激动人心的一个类,它不是最重要的,却是最实用的一个类
定义了一些常用的特效方法,不妨自己多动手试试下面的方法,很有趣的

fadeIn( [Object options] ) : Ext.Element
渐显 options参数有以下属性
callback:Function    完成后的回叫方法
scope:Object        目标
easing:String        行为方法 默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的
easeNone:匀速
easeIn:开始慢且加速
easeOut:开始快且减速
easeBoth:开始慢且减速
easeInStrong:开始慢且加速,t的四次方
easeOutStrong:开始快且减速,t的四次方
easeBothStrong:开始慢且减速,t的四次方
elasticIn:
elasticOut:
elasticBoth:
backIn:
backOut:
backBoth:
bounceIn:
bounceOut:
bounceBoth:
太多,慢慢体会吧
afterCls:String        事件完成后元素的样式
duration:Number        事件完成时间(以秒为单位)
remove:Boolean        事件完成后元素销毁?
useDisplay:Boolean    隐藏元素是否使用display或visibility属性?
afterStyle:String/Object/Function        事件完成后应用样式
block:Boolean        块状化?
concurrent:Boolean    顺序还是同时执行?
stopFx :Boolean    当前效果完成后随合的效果是否将停止和移除

fadeOut( [Object options] ) : Ext.Element
渐隐 fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度
例:el.fadeIn({duration:5,endOpacity:0.7});

frame( [String color], [Number count], [Object options] ) : Ext.Element
边框变亮扩展然后渐隐
例:el.frame("ff0000", 10, { duration: 3 })

ghost( [String anchor], [Object options] ) : Ext.Element
渐渐滑出视图,anchor定义
tl     左上角(默认)
t      上居中
tr     右上角
l      左边界的中央
c      居中
r      右边界的中央
bl     左下角
b      下居中
br     右下角
例:
el.ghost('b', {
    easing: 'easeOut',
    duration: .5
    remove: false,
    useDisplay: false
});

hasActiveFx() : Boolean
指示元素是否当前有特效正在活动

hasFxBlock() : Boolean
是否有特效阻塞了

highlight( [String color], [Object options] ) : Ext.Element
高亮显示当前元素
例:el.highlight("ffff9c", {
    attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
    endColor: (current color) or "ffffff",
    easing: 'easeIn',
    duration: 1
});


pause( Number seconds ) : Ext.Element
暂停

puff( [Object options] ) : Ext.Element
吹,吹,吹个大气球,元素渐大并隐没
例:el.puff({
    easing: 'easeOut',
    duration: .5,
    remove: false,
    useDisplay: false
});

scale( Number width, Number height, [Object options] ) : Ext.Element
缩放
例:el.scale(
    [element's width],
    [element's height], {
    easing: 'easeOut',
    duration: .35
});

sequenceFx()
排队特效

shift( Object options ) : Ext.Element
位移,并可重置大小,透明度等
例:
el.shift({
    width: [element's width],
    height: [element's height],
    x: [element's x position],
    y: [element's y position],
    opacity: [element's opacity],
    easing: 'easeOut',
    duration: .35
});

slideIn( [String anchor], [Object options] ) : Ext.Element
slideOut( [String anchor], [Object options] ) : Ext.Element
滑入/滑出
例:el.slideIn('t', {
    easing: 'easeOut',
    duration: .5
});


stopFx() : Ext.Element
停止特效

switchOff( [Object options] ) : Ext.Element
收起并隐没
例:
el.switchOff({
    easing: 'easeIn',
    duration: .3,
    remove: false,
    useDisplay: false
});


syncFx() : Ext.Element
异步特效
目录
相关文章
|
存储 缓存 安全
Spring Security系列教程11--Spring Security核心API讲解
前言 经过前面几个章节的学习,一一哥 带大家实现了基于内存和数据库模型的认证与授权,尤其是基于自定义的数据库模型更是可以帮助我们进行灵活开发。但是前面章节的内容,属于让我们达到了 "会用" 的层级,但是 "为什么这么用",很多小伙伴就会一脸懵逼了。对于技术学习来说,我们追求的不仅要 "知其然",更要 "知其所以然"! 本篇文章中,壹哥 就跟各位小伙伴一起来了解剖析Spring Security源码内部,实现认证授权的具体过程及底层原理。接下来请各位做好心理准备,以下的学习过程可能会让你心理 “稍有不适” 哦,因为每次看源码都懵懵的...... 一. Spring Security认证请求完整
348 0
|
负载均衡 Cloud Native 算法
【云原生&微服务二】SpringCloud之Ribbon自定义负载均衡策略(含Ribbon核心API)
【云原生&微服务二】SpringCloud之Ribbon自定义负载均衡策略(含Ribbon核心API)
229 0
【云原生&微服务二】SpringCloud之Ribbon自定义负载均衡策略(含Ribbon核心API)
|
存储 JSON 移动开发
etcd通信接口:客户端 API 实践与核心方法
你好,我是 aoho,今天我和你分享的主题是通信接口:客户端 API 实践与核心方法。 我们在前面一课时介绍了 etcd 的整体架构。学习客户端与 etcd 服务端的通信以及 etcd 集群节点的内部通信接口对于我们更好地使用和掌握 etcd 组件很有帮助,也是所必需了解的内容。本课时我们将会介绍 etcd 的 gRPC 通信接口以及客户端的实践。
317 0
|
Java 数据库连接 API
深入了解数据校验(Bean Validation):ValidatorFactory和Validator等核心API【享学Java】(上)
深入了解数据校验(Bean Validation):ValidatorFactory和Validator等核心API【享学Java】(上)
深入了解数据校验(Bean Validation):ValidatorFactory和Validator等核心API【享学Java】(上)
|
Java 数据库连接 程序员
深入了解数据校验(Bean Validation):ValidatorFactory和Validator等核心API【享学Java】(下)
深入了解数据校验(Bean Validation):ValidatorFactory和Validator等核心API【享学Java】(下)
|
SQL XML Java
Mybatis(一)——【快速入门、增删查改操作、核心配置文件描述及API】
Mybatis(一)——【快速入门、增删查改操作、核心配置文件描述及API】
Mybatis(一)——【快速入门、增删查改操作、核心配置文件描述及API】
|
存储 自然语言处理 算法
Java核心类库之(常用API、字符串类、集合类、泛型)
本模块学习Java语言中常用API、String类、集合和泛型、并掌握内存中增删改查操作
159 0
Java核心类库之(常用API、字符串类、集合类、泛型)
|
消息中间件 负载均衡 网络协议
Kafka实战(六) - 核心API全面解析
Kafka实战(六) - 核心API全面解析
167 0
Kafka实战(六) - 核心API全面解析
|
机器学习/深度学习 人工智能 运维
2021 年,以 API 为核心驱力的五大数字化转型趋势
2021 年的第一项挑战,在于解决 2020 年诸多问题带来的持续影响。而展望未来,企业需要筹划未来十年之内如何超越数字化转型、全面实现数字卓越。
661 0
2021 年,以 API 为核心驱力的五大数字化转型趋势