javascript - Velocity.js显示: 'block' doesn't work when combined with left: '-50px'

Question

有什么想法为什么当我将 {left: '-50px'}, 添加到速度命令时，display: 'block' 和 opacity: 1 未应用。

在 CSS 中，.popover 设置为 display: none 和 opacity: 0

如果我从速度中删除显示属性并使用 jQuery 中的 .show() ，整个事情就可以正常工作，但我想尝试在速度中完成这一切。

('.popover').velocity({left: '-50px'}, {"opacity": 1}, {display: 'block'});

Answer 1

您使用错误，传递给速度的第一个对象需要包含要动画的属性，第二个对象传递选项:

$('.popover').velocity({
     left: '-50px',
     opacity: 1,
     display: 'block'
}, {duration: 1000});

根据documentation :

$element.velocity({ 
width: "500px",
property2: value2
}, {
/* Velocity's default options */
duration: 400,
easing: "swing",
queue: "",
begin: undefined,
progress: undefined,
complete: undefined,
display: undefined,
visibility: undefined,
loop: false,
delay: false,
mobileHA: true
});