我们承诺每页只显示一个小型广告。 不用担心，隐藏此消息将确保您不会再被烦扰。
过渡
缩放
元素可以缩放进或出视图
$('.autumn.leaf') .transition('scale') ;
缩放2.3 版新增功能
元素可以从远处放大到视图中
$('.autumn.leaf') .transition('zoom') ;
淡入淡出
元素可以淡入淡出视图，下降和上升
$('.autumn.leaf') .transition('fade') ;
$('.autumn.leaf') .transition('fade up') ;
$('.autumn.leaf') .transition('fade down') ;
$('.autumn.leaf') .transition('fade left') ;
$('.autumn.leaf') .transition('fade right') ;
翻转
元素可以垂直或水平地翻转进或出视图
$('.autumn.leaf') .transition('horizontal flip') ;
$('.autumn.leaf') .transition('vertical flip') ;
下降
元素可以从上方下降到视图中
$('.autumn.leaf') .transition('drop') ;
飞入
元素可以从画布外飞入
$('.autumn.leaf') .transition('fly left') ;
$('.autumn.leaf') .transition('fly right') ;
$('.autumn.leaf') .transition('fly up') ;
$('.autumn.leaf') .transition('fly down') ;
摆动
元素可以摆动到视图中
$('.autumn.leaf') .transition('swing left') ;
$('.autumn.leaf') .transition('swing right') ;
$('.autumn.leaf') .transition('swing up') ;
$('.autumn.leaf') .transition('swing down') ;
浏览
元素可以作为一系列的一部分出现和消失
$('.autumn.leaf') .transition('browse') ;
$('.autumn.leaf') .transition('browse right') ;
滑动
元素可以从上方或下方滑入
$('.autumn.leaf') .transition('slide down') ;
$('.autumn.leaf') .transition('slide up') ;
$('.autumn.leaf') .transition('slide left') ;
$('.autumn.leaf') .transition('slide right') ;
静态动画
抖动
元素可以抖动以吸引人们对其形状的注意
$('.autumn.leaf') .transition('jiggle') ;
闪烁
元素可以闪烁以吸引人们对其自身的注意
$('.autumn.leaf') .transition('flash') ;
摇晃
元素可以摇晃以吸引人们对其位置的注意
$('.autumn.leaf') .transition('shake') ;
脉动
元素可以脉动以吸引人们对其可见性的注意
$('.autumn.leaf') .transition('pulse') ;
欢呼
元素可以为用户提供针对操作的正面反馈
$('.autumn.leaf') .transition('tada') ;
弹跳
元素可以弹跳以礼貌地提醒您自己
$('.autumn.leaf') .transition('bounce') ;
发光2.3 版新增功能
元素可以发光以显示其在页面中的位置。
$('.autumn.leaf') .transition('glow') ;
可见性
在元素的动画队列完成之后，将确定其最终可见性状态。 如果动画是向外过渡，则最终可见性状态将是隐藏的。 如果动画是向内的，则元素将在动画完成后可见。
$('.long.leaf.image') .transition('scale') ;
指定方向
要强制动画方向，请在动画名称中添加in或out。
$('.long.leaf.image') // 如果指定了方向，则会遵守它 .transition('horizontal flip in') .transition('vertical flip in') ;
自动方向
如果没有指定动画方向，它将根据元素的当前可见性自动确定。 例如，如果元素可见，则将调用动画“fade out”，如果动画不可见，则调用“fade in”。
$('.long.leaf.image') // 如果可用，将使用淡出向上动画 .transition('fade up') // 现在是淡入向上动画 .transition('fade up') ;
分组过渡
动画间隔
在对一组中多个不同项目进行动画处理时，您可能希望使用间隔，以便每个项目依次出现
$('.jiggle.images .image') .transition({ animation : 'jiggle', duration : 800, interval : 200 }) ;
动画顺序
隐藏一组元素时，默认设置使用reverse: 'auto'。 这将自动反转隐藏元素时从后到前的动画顺序，以避免布局回流。 显示元素时，顺序将返回到其正常顺序。
$('.sequenced.images .image') .transition({ animation : 'scale', reverse : 'auto', // 默认设置 interval : 200 }) ;
强制顺序
如果需要手动强制反向动画，无论动画方向如何，都可以使用reverse: true。
$('.reverse.images .image') .transition({ animation : 'pulse', reverse : true, interval : 200 }) ;
静态动画
没有定义 in 或 out 动画的动画将在运行后保持其当前可见性
$('.long.leaf.image') .transition('pulse') ;
循环
可以通过设置循环来控制动画循环。 回调将在每个循环周期后发生
$('.long.leaf.image') .transition('set looping') .transition('bounce', '2000ms') ;
$('.long.leaf.image') .transition('remove looping') ;
介绍
UI 过渡提供了一个包装器，用于在 Javascript 中使用 CSS 过渡，从而提供跨浏览器回调、高级排队和功能检测。
过渡与其他 UI 模块（如下拉菜单和模态框）松散地耦合，以提供元素过渡
类型
过渡分为三类。 **向内过渡**、**向外过渡**和**静态过渡**。 这三类确定动画完成后元素的可见性。
使用
初始化
如果在不带任何参数的情况下调用过渡，则将使用所有默认设置。
$('.green.leaf') // 默认所有内容 .transition() ;
传入设置
过渡使用与animate类似的简写参数。 您可以在使用相同参数的情况下指定回调函数、动画持续时间和其他设置。 持续时间可以指定为带有 CSS 简写形式的字符串，或使用数字。
$('.green.leaf') .transition({ animation : 'scale', duration : '2s', onComplete : function() { alert('done'); } }) ;
显示类型
动画可以用于任何显示类型，而不仅仅是块级元素。 例如，您可以在保留其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将继续当前播放，但删除排队的动画。
// 只取消第一个水平翻转 $('.green.leaf') .transition('horizontal flip') .transition('horizontal flip') .transition('horizontal flip') .transition('stop') .transition('vertical flip') ;
// 取消所有水平翻转 $('.green.leaf') .transition('horizontal flip') .transition('horizontal flip') .transition('horizontal flip') .transition('stop all') .transition('vertical flip') ;
// 取消所有排队的动画 $('.green.leaf') .transition('horizontal flip') .transition('horizontal flip') .transition('vertical flip') .transition('clear queue') ;
隐藏/显示不进行过渡
您可以使用过渡 show 和 hide 行为来隐藏内容，而无需动画。这将保留元素的显示类型，例如 flex 或 table-cell，就像动画一样。
$('.demo.table tr:last-child') .transition('toggle') ;
$('.demo.table td:last-child') .transition('hide') ;
| John Lilki | [email protected] | 不 |
| Jamie Harington | [email protected] | 是 |
| Jill Lewis | [email protected] | 是 |
行为
以下所有行为都可以在语法中调用
$('.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 | 返回 animationname 的供应商前缀动画属性 |
| get animation event | 返回 animationend 的供应商前缀动画属性 |
| is visible | 返回元素当前是否可见 |
| is animating | 返回过渡是否正在进行 |
| is looping | 返回是否设置了动画循环 |
| is supported | 返回动画是否受支持 |
过渡设置表单设置修改过渡行为
| 设置 | 默认 | 描述 |
|---|---|---|
| animation | fade | 要使用的命名动画事件。必须在 CSS 中定义。 |
| interval | 0 | 每个元素过渡之间的间隔（毫秒） |
| reverse | auto | 当指定间隔时，设置动画的顺序。auto 仅反转隐藏的动画。 |
| displayType | false | 指定最终显示类型（block、inline-block 等），以便无需计算。 |
| duration | 500ms | CSS 过渡动画的持续时间 |
| useFailSafe | true | 如果启用，将添加 timeout 以确保即使元素隐藏，animationend 回调也会发生 |
| allowRepeats | false | 如果启用，将允许在动画正在进行时将相同的动画排队 |
| queue | true | 如果另一个动画正在进行，是否自动排队动画 |
回调回调指定在特定行为之后发生的函数。
| 设置 | 上下文 | 描述 |
|---|---|---|
| onShow | 过渡元素 | 每个过渡的回调，将可见性更改为显示 |
| onHide | 过渡元素 | 每个过渡的回调，将可见性更改为隐藏 |
| onStart | 过渡元素 | 动画开始时的回调，对排队的动画很有用 |
| onComplete | 过渡元素 | 每个过渡完成时的回调 |
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 | 过渡 | 调试日志中使用的名称 |
| 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' }
|
|