菜单

过渡动画
元素隐藏或者显示时的过渡(动画)效果。

下载

过渡动画

拉伸 (Scale)

元素可以在显示的时候拉伸自己。

$('.autumn.leaf') .transition('scale') ;

淡化 (Fade)

元素可以在显示的时候向上和向下淡化自己

$('.autumn.leaf') .transition('fade') ;
$('.autumn.leaf') .transition('fade up') ;
$('.autumn.leaf') .transition('fade down') ;
$('.autumn.leaf') .transition('fade left') ;
$('.autumn.leaf') .transition('fade right') ;

翻转 (Flip)

元素可以在显示的时候水平和垂直翻转自己

$('.autumn.leaf') .transition('horizontal flip') ;
$('.autumn.leaf') .transition('vertical flip') ;

退出 (Drop)

元素可以在显示的时候从上面退出

$('.autumn.leaf') .transition('drop') ;

飞出 (Fly)

元素可以从屏幕上飞出

$('.autumn.leaf') .transition('fly left') ;
$('.autumn.leaf') .transition('fly right') ;
$('.autumn.leaf') .transition('fly up') ;
$('.autumn.leaf') .transition('fly down') ;

摆动 (Swing)

元素可以摆动进入

$('.autumn.leaf') .transition('swing left') ;
$('.autumn.leaf') .transition('swing right') ;
$('.autumn.leaf') .transition('swing up') ;
$('.autumn.leaf') .transition('swing down') ;

浏览 (Browse)

元素可以以持续的出现或消失

$('.autumn.leaf') .transition('browse') ;
$('.autumn.leaf') .transition('browse right') ;

滑动 (Slide)

一个元素可以出现从上方或下方滑动显示。

$('.autumn.leaf') .transition('slide down') ;
$('.autumn.leaf') .transition('slide up') ;
$('.autumn.leaf') .transition('slide left') ;
$('.autumn.leaf') .transition('slide right') ;

静态动画

微动 (Jiggle)

元素可以微动提醒注意其位置

$('.autumn.leaf') .transition('jiggle') ;

闪烁 (Flash)

一个元素可以闪烁,提醒大家注意自身。

$('.autumn.leaf') .transition('flash') ;

震动 (Shake)

个元素可以震动提请注意其位置。

$('.autumn.leaf') .transition('shake') ;

脉冲 (Pulse)

一个元素可以脉冲提请注意它。

$('.autumn.leaf') .transition('pulse') ;

闪动 (Tada)

一个元素可以给用户一个动作的积极反馈

$('.autumn.leaf') .transition('tada') ;

弹跳 (Bounce)

一个元素可以弹跳效果用来礼貌地提醒注意它。

$('.autumn.leaf') .transition('bounce') ;

可见性

当元素的动画队列结束后,它的最终可见状态是确定的. 如果动画是一个外向型的过渡,最终的可见性状态将被隐藏. 如果动画是内在的元素将在动画完成后可见.

$('.long.leaf.image') .transition('scale') ;

指定方向 (Specifying a direction)

强制动画方向,请使用 in 或者 out

$('.long.leaf.image') // if a direction if specified it will be obeyed .transition('horizontal flip in') .transition('vertical flip in') ;

自动方向 (Automatic Direction)

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

$('.long.leaf.image') // fade up out is used if available .transition('fade up') // this is now fade up in .transition('fade up') ;

分组过渡 (Grouped Transitions)

动画间隔 (Animation Intervals)

当一个组中有几个不同的动画项,你可能想用间隔来使每一项连续出现

$('.jiggle.images .image') .transition({ animation : 'jiggle', duration : 800, interval : 200 }) ;

动画顺序 (Animation Order)

当隐藏一组元素, 默认设置采用reverse: 'auto'. 当隐藏元素以防止布局溢出时,将自动从头到尾反转动画的顺序. 当显示元素时,将恢复其原来的动画顺序.

$('.sequenced.images .image') .transition({ animation : 'scale', reverse : 'auto', // default setting interval : 200 }) ;

强制顺序 (Forcing Order)

如果你需要手动强行反转动画,忽视动画的方向, 你可以用 reverse: true.

$('.reverse.images .image') .transition({ animation : 'pulse', reverse : true, interval : 200 }) ;

静态动画 (Static Animations)

如果动画没有定义进出的动作, 在执行之后会保持当前的可见状态

$('.long.leaf.image') .transition('pulse') ;

循环动画 (Looping)

动画的循环可以通过设置循环来控制. 在每一次循环之后都会调用回调函数

$('.long.leaf.image') .transition('set looping') .transition('bounce', '2000ms') ;
$('.long.leaf.image') .transition('remove looping') ;

介绍

界面转换为JavaScript跨浏览器回调提供了css封装。

类型

转换分为三类. 向内转换, 向外转换, 和 静态转换.这三种策略决定元素在动画完成之后的可见性.

用法

初始化

如果转换不使用菜单被调用,则就会用默认的设置。

$('.green.leaf') // default everything .transition() ;

通过和设置

过渡使用相似的参数速记为animate. 你可以用相同的参数指定回调函数, 动画持续时间和其他设置. 持续时间可以被指定为与CSS速记的字符串或数字.

$('.green.leaf') .transition({ animation : 'scale', duration : '2s', onComplete : function() { alert('done'); } }) ;

D显示类型

动画可以用于任何不是块级元素的显示类型.比如你可以使按钮变化在保存它的inline-block状态时.

$('.test.button') .transition('horizontal flip', '500ms') ;
注册

动画队列

动画在队列中被有序调用. 任何有序动画如果没有指定变换方向将会自动决定方向.

$('.green.leaf') .transition('horizontal flip', '500ms') .transition('horizontal flip', 500, function() { alert('done!'); }) ;

停止动画

动画的停止有三种方法. stop将会停止当前动画, stop all将停止动画并且移除动画队列, clear queue 将继续目前的播放,但删除队列的动画.

// only first horizontal flip cancelled $('.green.leaf') .transition('horizontal flip') .transition('horizontal flip') .transition('horizontal flip') .transition('stop') .transition('vertical flip') ;
// all horizontal flip cancelled $('.green.leaf') .transition('horizontal flip') .transition('horizontal flip') .transition('horizontal flip') .transition('stop all') .transition('vertical flip') ;
// all queued animations cancelled $('.green.leaf') .transition('horizontal flip') .transition('horizontal flip') .transition('vertical flip') .transition('clear queue') ;

不用过度来隐藏/显示

你可以用过渡的showhide 行为来隐藏没有动画的内容. 它将保存显示类型, 比如元素的flex或者table-cell就像动画一样.

当元素的最终显示状态没有block时,过渡只是用内联样式, 或者当一个元素不能隐藏无内联重写.
$('.demo.table tr:last-child') .transition('toggle') ;
$('.demo.table td:last-child') .transition('hide') ;
John Lilki [email protected] No
Jamie Harington [email protected] Yes
Jill Lewis [email protected] Yes

行为

以下所有的行为都可以用语法来调用:

$('.your.element') .transition('behavior name', argumentOne, argumentTwo) ;
行为 描述
stop 停止当前动画保存队列
stop all 停止当前的动画和排队的动画
clear queue 清除所有排队的动画
show 停止当前动画并显示元素
hide 停止当前动画并显示隐藏元素
toggle 在隐藏和显示之间切换
force repaint 用一个更耗时但是稳定的方法强制回流
repaint 触发元素回流
reset 在过渡期间重置所有条件的变化
looping 支持动画循环
remove looping 从元素上移除动画循环
disable 添加不可用状态 (停止动画的性能)
enable 移除不可用状态
set duration(duration) 修改元素的动画持续时间
save conditions 保存所有的类名称和风格,使高速缓存在动画结束后被检索
restore conditions 为元素添加回缓存的名称和风格
get animation name 返回供应商前缀的动画属性为动画名称
get animation event 返回供应商前缀的动画属性动画结束
is visible 返回元素是否当前可见
is animating 返回过渡是否正在发生
is looping 返回是否设置了动画循环
is supported 返回是否支持动画

过度效果设置
设置修改过渡行为

设置 默认 描述
animation fade 使用命名的动画事件。必须在CSS中定义.
interval 0 每一个过渡元素之间的距离
reverse auto 当区间指定后,设置动画顺序. auto只保存被隐藏的动画.
displayType false 指定最终显示的状态(块, 内联块等),从而不必要计算.
duration 500ms CSS过渡动画的持续时间
useFailSafe true 如果启用一个timeout,会在确定元素隐藏并animationend回调后添加
allowRepeats false 如果启用,将允许相同的动画被排队,即便它已经发生了
queue true 在另一个动画队列发生的时候,是否自动形成一个队列

回调函数
回调函数指定一个函数在特定行为之后执行

设置 语境 描述
onShow transitioned element 在每一个过渡改变可见性为显示后回调
onHide transitioned element 在每一个过渡,改变可见性为隐藏后回调
onStart transitioned element 在动画开始回调,用于排队的动画
onComplete transitioned element 在每次过渡完成之后回调

DOM 设置
DOM设置指定如何用DOM接口模块

设置 默认 描述
namespace transition 事件的命名空间.确保不受其他元素影响。
className
className : { animating : 'animating', disabled : 'disabled', hidden : 'hidden', inward : 'in', loading : 'loading', looping : 'looping', outward : 'out', transition : 'transition', visible : 'visible' }
类名用于为状态附加类型

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

设置 默认 描述
name Transition 调试日志使用的名称
silent False 禁用所有输出显示,包括错误
debug False 提供标准调试输出到控制台
performance True 提供标准调试输出到控制台
verbose True 提供辅助调试输出到控制台
errors
errors : { noAnimation : 'There is no CSS animation matching the one you specified.', method : 'The method you called is not defined' }