Velocity.js中文文档

Command 指令

Velocity 中预定义了几个常用的快捷动画指令。

Fade & Slide

“fadeIn” & “fadeOut”
Fade 对应为:”fadeIn”(淡入) 和”fadeOut”(淡出) 两个动画指令, 和 jQuery 的$.fadeIn(),$.fadeOut()相似。

Fade 和 Slide 动画指令 都会动态设置元素的 cssdisplay属性显示或隐藏。 默认情况下,当元素被显示,如果是块级元素 比如< div >,就会被设置成display: block,如果是行级元素 比如< span >就会被设为display: inline, Velocity 会根据元素的标签类型 设置最适合的值。
但如果你在配置项中设置了display选项为某值时, 动画结束时该值会覆盖 Fade 和 Slide 所设置的display属性值:

// 元素会执行平滑淡入的效果
// 当动画结束时 元素的 display 属性会被设置成 "table"
$element.velocity("fadeIn", { display: "table" });

“slideUp” & “slideDown”
Slide 对应为:”slideUp”(收起) 和”slideDown”(展开)两个动画指令, 和 jQuery 的$.slideUp(),$.slideDown()方法相似,通过动态调整元素的height属性,让元素 “收起” 或 “下拉”,看下面这个示例:

// 元素会先"收起"隐藏,延迟500毫秒后 再"下拉"显示
$element
    .velocity("slideUp", { duration: 1500 })
    .velocity("slideDown", { delay: 500, duration: 1500 });

Scroll 滚动

滚动浏览器内容到目标元素的位置
“scroll”动画指令,比如常用的回顶动画 就可以使用这个指令:

/* 回顶动画,滚动浏览器内容到  的顶部 */
$("body").velocity("scroll", { duration: 500, easing: "easeOutQuart" });

滚动元素内容到目标位置
当一个元素的内容部分溢出产生滚动条,可以使用”scroll”将内容滚动到指定的位置,container选项对应为该元素的选择器,看下面例子:

/* 让 $("#container") 元素的内容滚动到内部子元素 $("#element3") 所在的位置. */
$("#element3").velocity("scroll", { container: $("#container") });

设置滚动相对偏移量
可以设置相对偏移量,单位默认为px:

$element
    /* 滚动到相对 $element 向下偏移250px的地方 */
    .velocity("scroll", { duration: 750, offset: 250 })
    /* 再滚动到相对 $element 向上偏移50px的地方 */
    .velocity("scroll", { duration: 750, offset: -50 });

另外,当滚动整个浏览器窗口时 如果目标元素为, 可以关闭硬件加速 设置mobileHA: false来避免 iOS 中可能出现的页面闪动问题。

/* 滚动整个页面到一个任意值 */
$("html").velocity("scroll", { offset: "750px", mobileHA: false });

Stop 停止当前动画

“stop”指令,可以使当前正在执行的动画立即停止,类似 jQuery 的$.stop()方法

$element.velocity("stop"); // 停止正在执行的 $element 元素的动画
$element.velocity("stop", "myQueue"); // 停止某自定义队列
$element.velocity({ left: 100 });

// 点击 $("#button"),立即停止当前正在执行的 left 动画
// 并立即反向执行 left 动画 (right 方向运动)
$("#button").on("click", function() {
    $element.velocity("stop").velocity("reverse");
});

设置stop: true, 可以停止并清空当前正在执行的整个动画队列

$element
    .velocity({ width: 100 }, 1000)
    .velocity({ height: 200 }, 1000);

// 如果元素正在执行 width 动画,点击 $("#button") 将立即停止当前动画
// 并移除和跳过将要执行的 height 动画队列
$("#button").on("click", function() {
    $element.velocity("stop", true);
});

Finish 停止并跳转到动画结束时的状态

“finish”指令会停止当前正在执行的动画,并直接跳转到动画结束的状态(无过渡)。

$element.velocity("finish");

Reverse 使动画反向执行

“reverse”指令使动画反向执行,就像让一部电影倒着播放。 Reverse 默认会继承之前动画的配置选项(比如duration,easing等), 但也可以重新设置:

$element
    .velocity({ left: 200 }, { duration: 500 })
    .velocity("reverse", { duration: 2000 });
上一篇: 下一篇: