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

我想知道我错在哪里。

Answer 1

标准velocity.js中没有后退，反弹和弹性缓动类型。 来自文档：

  

预先打包到Velocity中的是jQuery UI的缓动， 除了背面，弹跳和弹性缓动类型 。

但是看一下Ease+ for Velocity.js，它会将Back，Elastic，Bounce添加到velocity.js。

Answer 2

尝试这个

function openNav（）{$（＆＃39; .navigation＆＃39;）。velocity（{height：＆＃34; 87vh＆＃34;}，{duration：1000，display：＆＃39; block＆＃39 ;}，{easing：＆＃39; easeOutBounce＆＃39;}）; }