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 
    }); 
});