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

Question

我有一个元素，我希望在velocity.js的帮助下转换到某个状态（transform：scale（1）和opacity：1）。 初始状态在css中设置（transform：scale（.9）和opacity：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
    });
});