Velocity.js 显示：'block' 与 left: '-50px' 组合时不起作用

Question

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

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

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

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

Answer 1

你用错了，传递给 velocity 的第一个对象需要包含要动画的属性，第二个你传递的是选项：

$('.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
});

Velocity.js 显示：'block' 与 left: '-50px' 组合时不起作用

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

javascript

css

jquery

velocity