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'}）; }