[英]Easing function with Velocity.js don't work properly
I call a velocity.js function to show/hide a navbar up to the viewport. 我调用了velocity.js函数,以显示/隐藏导航栏直至视口。 I have two functions to achieve this.
我有两个功能可以实现这一点。
function openNav(){
$('.navigation').velocity({height: "87vh"},{duration: 1000, display: 'block'}); }
function closeNav(){
$('.navigation').velocity({height: '0vh'}, {duration: 1000, display: 'none'}); }
Now I want to add different easing function in both animations. 现在,我想在两个动画中添加不同的缓动功能。
So, From Velocity.js Easing Doc : 因此,从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'}); }
But easing functions aren't properly applied and I see the default behavior 但是缓动功能未正确应用,我看到了默认行为
I've also tried to add easing in this way: 我还尝试通过这种方式添加宽松政策:
$element.velocity({height: '0vh'}, "easeOutElastic");
I'd like to know where I'm wrong. 我想知道我错了。
Back, bounce, and elastic easing types are not available in standard velocity.js. 反向,反弹和弹性缓动类型在标准velocity.js中不可用。 From the documentation:
从文档中:
Pre-packaged into Velocity are jQuery UI's easings, except for the back, bounce, and elastic easing types .
预包装到Velocity中的是jQuery UI的缓动 , 但back,bounce和弹性缓动类型除外 。
But take a look at Ease+ for Velocity.js , it adds Back, Elastic, Bounce to velocity.js. 但是,请看一下Velocity.js的Ease + ,它将Velocity.js添加Back,Elastic和Bounce。
TRY this 尝试这个
function openNav() { $('.navigation').velocity({ height: "87vh"},{duration: 1000, display: 'block'},{easing: 'easeOutBounce' }); 函数openNav(){$('。navigation')。velocity({height:“ 87vh”},{duration:1000,display:'block'},{easing:'easeOutBounce'}); }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.