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

Question

我有一个元素，我想在velocity.js的帮助下转换到某个状态（变换：比例（1）和不透明度：1）。初始状态在 css 中设置（变换：比例（.9）和不透明度：0）。

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

我以codepen为例： http ://codepen.io/IbeVanmeenen/pen/iFwBE

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

谁能帮我解决这个问题？

Answer 1

Velocity.js 使用 Forcefeeding，因此您的样式表中的值将被忽略。有关更多详细信息，请参阅有关 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
    });
});