javascript - velocity.js 的第一个动画被忽略

Question

我有一个元素，我想在 velocity.js 的帮助下转换到某个状态(变换:缩放(1)和不透明度:1)。初始状态在 css 中设置(变换:scale(.9) 和不透明度:0)。

现在我第一次这样做时，动画就不会发生(在第一次加载时)。关闭它(将其设置回原始状态)后，当我再次调用它时，转换效果很好。

我做了一个codepen作为例子: http://codepen.io/IbeVanmeenen/pen/iFwBE

$element.velocity({
   scale: 1,
   opacity: 1
}

谁能帮我解决这个问题？

Answer 1

Velocity.js 使用 Forcefeeding，因此您在样式表中的值将被忽略。参见 the documentation on forcefeed了解更多详情。

起始值作为数组中的第二项或第三项传递:

$('.js-info-button-open').on('click', function() {
    $(this).next('.js-info-button-content').velocity({
        scale: [1, 0.9],
        opacity: [1, 0]
    }, {
        display: 'block',
        easing: [0, 0, 0, 4],
        duration: 1000
    });
});