Velocity.js 的缓动功能无法正常工作答案

【问题标题】：Easing function with Velocity.js don't work properlyVelocity.js 的缓动功能无法正常工作
【发布时间】：2018-01-26 23:43:07
【问题描述】：

我调用velocity.js 函数来显示/隐藏导航栏到视口。我有两个功能来实现这一点。

function openNav(){
$('.navigation').velocity({height: "87vh"},{duration: 1000, display: 'block'}); }


function closeNav(){
$('.navigation').velocity({height: '0vh'}, {duration: 1000, display: 'none'}); }

现在我想在两个动画中添加不同的缓动功能。

所以，来自Velocity.js Easing Doc：

function openNav(){
$('.navigation').velocity({height: "87vh"},{duration: 1000, easing: 'easeOutBounce' , display: 'block'}); }


function closeNav(){
$('.navigation').velocity({height: '0vh'}, {duration: 1000, easing: 'easeOutElastic' , display: 'none'}); }

但缓动函数没有正确应用，我看到了默认行为

我也尝试过以这种方式添加缓动：

$element.velocity({height: '0vh'}, "easeOutElastic");

我想知道我错在哪里。

【问题讨论】：

标签： javascript velocity.js jquery-easing

【解决方案1】：

标准velocity.js 中不提供后退、反弹和弹性缓动类型。来自文档：

Velocity 中预装了 jQuery UI 的缓动，除了后退、反弹和弹性缓动类型。

但是看看Ease+ for Velocity.js，它在velocity.js 中添加了Back、Elastic、Bounce。

【讨论】：

我正在准备 Velocity v2 下周的公开测试版，所以我会在此之前看看我是否可以在其中添加这些缓动。感谢您指向该回购！ :-)
它们现在都在 2.0.2（下一个 beta 版本）中得到支持 - 除了“Back”之外的所有内容都是 2.0.0 添加的

【解决方案2】：

试试这个

function openNav() { $('.navigation').velocity({ height: "87vh"},{duration: 1000, display: 'block'},{easing: 'easeOutBounce' }); }

【讨论】：

这从来不是 Velocity 参数用于缓动的方式，原始示例具有正确的命令。