Menu

Transition
Transition是一种动画,通常用于将内容移进或移出视图

下载

转换

规模

元素可以缩放到视图内或视图外

$('.秋天.叶”) .Transition(的规模) ;

变焦
新2.3

一个元素可以从远处放大

$('.秋天.叶”) .Transition(“变焦”) ;

褪色

元素可以降序或升序淡入或淡出视图

$('.秋天.叶”) .Transition(“褪色”) ;
$('.秋天.叶”) .Transition(消失了) ;
$('.秋天.叶”) .Transition(“衰减”) ;
$('.秋天.叶”) .Transition(消失了) ;
$('.秋天.叶”) .Transition(“消失吧”) ;

翻转

元素可以垂直或水平翻转进入或退出视图

$('.秋天.叶”) .Transition(“水平翻转”) ;
$('.秋天.叶”) .Transition(“垂直翻转”) ;

下降

元素可以从上面进入视图

$('.秋天.叶”) .Transition(下降) ;

一个元素可以从画布上飞进来

$('.秋天.叶”) .Transition(“飞了”) ;
$('.秋天.叶”) .Transition(“飞吧”) ;
$('.秋天.叶”) .Transition(“飞起”) ;
$('.秋天.叶”) .Transition(飞下来的) ;

摇摆不定的

元素可以进入视图

$('.秋天.叶”) .Transition(swing离开) ;
$('.秋天.叶”) .Transition(“摇摆对”) ;
$('.秋天.叶”) .Transition(“摇摆”) ;
$('.秋天.叶”) .Transition(“摆”) ;

浏览

元素可以作为系列的一部分出现和消失

$('.秋天.叶”) .Transition(浏览) ;
$('.秋天.叶”) .Transition(“浏览对”) ;

幻灯片

一个元素可以从上面或下面滑入

$('.秋天.叶”) .Transition(“下滑”) ;
$('.秋天.叶”) .Transition(幻灯片) ;
$('.秋天.叶”) .Transition(幻灯片左) ;
$('.秋天.叶”) .Transition(“幻灯片对”) ;

静态的动画

摇晃

一个元素可以通过抖动来吸引人们对其形状的注意

$('.秋天.叶”) .Transition(“摇晃”) ;

闪光

元素可以闪光来吸引人们的注意

$('.秋天.叶”) .Transition(“flash”) ;

元素可以通过震动来引起人们对其位置的注意

$('.秋天.叶”) .Transition(“动摇”) ;

脉冲

元素可以通过脉动来吸引人们对其可见性的注意

$('.秋天.叶”) .Transition(脉冲) ;

的大作

元素可以为用户的行为提供积极的反馈

$('.秋天.叶”) .Transition(“大作”) ;

反弹

元素可以弹跳来礼貌地提醒你它自己

$('.秋天.叶”) .Transition(“反弹”) ;

发光
新2.3

一个元素可以发光来显示它在页面中的位置.

$('.秋天.叶”) .Transition(发光) ;

可见性

当一个元素的动画队列结束后,它的最终可见性状态就确定了. 如果一个动画是一个向外的Transition,那么最终的可见状态将被隐藏. 如果动画是向内的,那么在动画结束后元素将是可见的.

$('.长.叶.图像') .Transition(的规模) ;

指定一个方向

要强制一个动画方向,添加任何一个 in or 到动画名称.

$('.长.叶.图像') //如果指定一个方向,它将被遵守 .Transition(“水平翻转”) .Transition(“垂直翻转”) ;

自动方向

如果没有指定动画方向,它将根据元素当前可见性自动确定. 例如, 如果元素是可见的,动画“淡出”将被调用, 如果动画不可见,使用渐入.

$('.长.叶.图像') //使用褪色 up 出 .Transition(消失了) //现在是淡入 .Transition(消失了) ;

分组转换

动画的时间间隔

当动画一组中多个不同的项目时,你可能想要使用一个间隔,以便每个项目连续出现

$('.摇晃.图片 .图像') .Transition({ 动画:“摇晃”, 持续时间:800 区间:200 }) ;

动画顺序

当隐藏元素组时,默认设置使用 反向:‘汽车’. 当隐藏元素时,这将自动倒转动画的顺序,以避免布局回流. 当显示元素时,顺序将返回正常的序列.

$('.测序.图片 .图像') .Transition({ 动画:“规模”, 反向:'汽车', //默认设置 区间:200 }) ;

迫使秩序

如果你需要手动强制反转动画而不考虑动画方向,你可以使用 相反,真正的.

$('.反向.图片 .图像') .Transition({ 动画:“脉搏”, 相反,真实的, 区间:200 }) ;

静态的动画

没有定义入或出动画的动画, 会在跑步后保持当前的能见度吗

$('.长.叶.图像') .Transition(脉冲) ;

循环

动画循环可以通过设置loop来控制. 回调将在每个循环之后发生

$('.长.叶.图像') .Transition(“设置循环”) .Transition(‘反弹’,‘2000 ms) ;
$('.长.叶.图像') .Transition(“删除循环”) ;

介绍

UI 转换提供了一个包装使用CSS 转换在Javascript提供跨浏览器回调, 先进的排队, 和功能检测.

Transition与其他ui模块松散耦合 下拉情态动词 提供元素转换

类型

转换分为三类. 内转换, 向外转移, 静态转换. 这三个类别决定了动画完成后元素的可见性.

使用

初始化

如果调用转换时不带任何参数,则将使用所有默认设置.

$('.绿色.叶”) / /默认的一切 .Transition() ;

传入的设置

转换使用类似的参数简写 动画. 您可以使用相同的参数指定回调函数、动画持续时间和其他设置. 持续时间可以用CSS缩写形式指定为字符串,也可以用数字指定.

$('.绿色.叶”) .Transition({ 动画:“规模”, 持续时间:2 s, onComplete: function() { alert('完成'); } }) ;

显示类型

动画可以用于任何显示类型,而不仅仅是块级元素. 例如,你可以在保留按钮的同时使其动画 inline-块 状态.

$('.测试.按钮”) .Transition(“水平翻转”、“500 ms”) ;
注册

排队的动画

按顺序调用的动画将被放入队列. 任何排队动画将自动确定Transition方向,如果没有指定.

$('.绿色.叶”) .Transition(“水平翻转”、“500 ms”) .转换('水平翻转',500,function() { 警报(“做!'); }) ;

停止动画

可以使用三种方法停止动画. 停止 将结束当前的动画, 停止一切 将结束动画和删除排队动画,和 清除队列 将继续当前播放但删除排队动画.

//只取消第一个水平翻转 $('.绿色.叶”) .Transition(“水平翻转”) .Transition(“水平翻转”) .Transition(“水平翻转”) .Transition(停止) .Transition(“垂直翻转”) ;
//所有水平翻转取消 $('.绿色.叶”) .Transition(“水平翻转”) .Transition(“水平翻转”) .Transition(“水平翻转”) .Transition(停止) .Transition(“垂直翻转”) ;
//所有排队动画取消 $('.绿色.叶”) .Transition(“水平翻转”) .Transition(“水平翻转”) .Transition(“垂直翻转”) .Transition(清除队列) ;

隐藏/显示没有Transition

可以使用Transition 显示隐藏 行为隐藏没有动画的内容. 这将保留显示类型,比如 flex or 表格单元 就像动画一样.

只有当一个元素的最终显示状态不是时,Transition才使用内联样式 ,或者当元素没有内联覆盖就无法隐藏时.
$('.演示.表tr:胎”) .Transition(切换) ;
$('.演示.表td:胎”) .Transition(隐藏的) ;
约翰Lilki jhlilk22@yahoo.com No
杰米Harington jamieharingonton@yahoo.com 是的
吉尔·刘易斯 jilsewris22@yahoo.com 是的

行为

下面的所有行为都可以使用该语法调用:

$('.你的.元素”) .Transition('行为名称',argumentOne, argumentTwo) ;
行为 描述
停止 停止当前动画并保存队列
停止一切 停止当前动画和排队动画
清除队列 清除所有排队动画
显示 停止当前动画并显示元素
隐藏 停止当前动画并隐藏元素
切换 在隐藏和显示之间切换
力重画 强制回流使用更昂贵但稳定的方法
重画 触发元素上的回流
重置 重置转换期间的所有条件更改
循环 使动画循环
删除循环 从元素中移除循环状态
禁用 添加禁用状态(停止动画能力)
启用 删除禁用状态
设置持续时间(持续时间) 修改元素动画持续时间
保存条件 保存所有类名和样式到缓存,以便在动画后检索
恢复条件 将缓存的名称和样式添加回元素
动画The名字 为动画The名字返回带有供应商前缀的动画属性
获得动画事件 返回动画end的带有供应商前缀的动画属性
是可见的 返回元素当前是否可见
是动画 返回当前是否正在发生转换
是循环 返回是否设置动画循环
支持 返回是否支持动画

Transition设置
表单设置修改转换行为

设置 默认的 描述
动画 褪色 命名动画事件来使用. 必须在CSS中定义.
时间间隔 0 在MS中每个元素之间的间隔转换
反向 汽车 当指定间隔时,设置动画的顺序. 汽车 只反转隐藏的动画.
displayType 指定最终的显示类型(块,内联块等),这样就不需要计算.
持续时间 500ms CSS转换动画的持续时间
useFailSafe 真正的 如果启用了一个 超时 将被添加以确保 动画end 即使元素被隐藏,回调也会发生
allowRepeats 如果启用,将允许相同的动画在队列中,而它已经发生
队列 真正的 是否自动排队动画,如果另一个发生

回调
回调函数指定在特定行为之后发生的函数.

设置 上下文 描述
昂秀 转换元素 对每个转换进行回调,将可见性更改为显示
onHide 转换元素 在将可见性更改为隐藏的每个转换上进行回调
onStart 转换元素 动画开始时的回调,对排队动画很有用
onComplete 转换元素 在每个转换完成时进行回调

DOM的设置
DOM设置指定该模块应该如何与DOM接口

设置 默认的 描述
名称空间 Transition 事件名称空间. 确保模块拆卸不会影响附加到元素的其他事件.
类名称
名称:{ 动画:“动画”, 禁用:“禁用”, 隐藏:“隐藏”, 内在的:“在”, 加载:“加载”, 循环:“循环”, 外:“出来”, Transition:“转型”, 可见:“可见” }
用于将样式附加到状态的类名

调试设置
调试设置控制到控制台的调试输出

设置 默认的 描述
The名字 Transition 调试日志的名称
沉默 关闭所有控制台输出,包括错误消息,而不考虑其他调试设置.
调试 提供标准的调试输出到控制台
性能 真正的 提供标准的调试输出到控制台
详细的 真正的 提供辅助调试输出到控制台
错误
错误:{ noAnimation: '没有匹配你指定的CSS动画.', 方法:'你调用的方法没有定义' }

调光器的信息
调光器分联箱

友情链接: 1 2 3 4 5 6 7 8 9