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

Question

我调用了velocity.js函数，以显示/隐藏导航栏直至视口。 我有两个功能可以实现这一点。

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


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

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

因此，从Velocity.js轻松文档 ：

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");

我想知道我错了。

Answer 1

反向，反弹和弹性缓动类型在标准velocity.js中不可用。 从文档中：

预包装到Velocity中的是jQuery UI的缓动 ， 但back，bounce和弹性缓动类型除外 。

但是，请看一下Velocity.js的Ease + ，它将Velocity.js添加Back，Elastic和Bounce。

Answer 2

尝试这个

函数openNav（）{$（'。navigation'）。velocity（{height：“ 87vh”}，{duration：1000，display：'block'}，{easing：'easeOutBounce'}）; }